Pourquoi l'ellipse CSS ne fonctionne-t-elle pas dans une cellule de tableau ?

Question

Prenons l'exemple suivant : ( Démonstration en direct ici )

$(function() {
  console.log("width = " + $("td").width());
});

td {
  border: 1px solid black;
  width: 50px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tbody>
    <tr>
      <td>Hello Stack Overflow</td>
    </tr>
  </tbody>
</table>

Le résultat est le suivant : width = 139 et l'ellipse n'apparaît pas.

Qu'est-ce qui m'échappe ?

Answer 1

.ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}

Le réglage ci-dessus a fonctionné pour moi, sans modifier la largeur des tableaux. J'ai ajouté une div à l'intérieur et j'y ai ajouté la classe ellipsis.

Answer 2

Si vous ne voulez pas fixer la largeur maximale à td (comme dans le cas de cette réponse ), vous pouvez fixer la largeur maximale à div :

function so_hack(){}

function so_hack(){} http://jsfiddle.net/fd3Zx/754/ function so_hack(){}

function so_hack(){}

Note : 100% ne fonctionne pas, mais 99% fait l'affaire dans FF. Les autres navigateurs modernes n'ont pas besoin de bidouillages stupides.

td {
  border: 1px solid black;
    padding-left:5px;
    padding-right:5px;
}
td>div{
    max-width: 99%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

}