CSS text-overflow in einer Tabellenzelle?

Question

Ich möchte CSS text-overflow in einer Tabellenzelle verwenden, so dass der Text, wenn er zu lang ist, um auf einer Zeile zu passen, mit einem Auslassungszeichen abgeschnitten wird, anstatt auf mehrere Zeilen umgebrochen zu werden. Ist das möglich?

Ich habe es so versucht:

td {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

Aber das white-space: nowrap scheint den Text (und seine Zelle) kontinuierlich nach rechts auszudehnen und die Gesamtbreite der Tabelle über die Breite ihres Containers hinaus zu schieben. Ohne diese Eigenschaft jedoch wird der Text weiterhin auf mehrere Zeilen umgebrochen, wenn er den Rand der Zelle erreicht.

Answer 1

Es scheint, dass wenn Sie table-layout: fixed; auf dem table-Element angeben, dann Ihre Styles für td wirksam werden sollten. Dies wird auch beeinflussen, wie die Zellen dimensioniert sind.

Sitepoint diskutiert die table-layout Methoden hier etwas genauer: http://reference.sitepoint.com/css/tableformatting

Answer 2

Wenn es sich um eine prozentuale Tabellenbreite handelt oder Sie die feste Breite der Tabellenzelle nicht festlegen können, können Sie table-layout: fixed; verwenden, um es funktionieren zu lassen.

table {
  table-layout: fixed;
  width: 100%;
}
td {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  border: 1px solid red;
}

    Lorem ipsum und Dim Sum ja ja ja. Lorem ipsum und Dim Sum ja ja ja. Lorem ipsum und Dim Sum ja ja ja. Lorem ipsum und Dim Sum ja ja ja. Lorem ipsum und Dim Sum ja ja ja.
    Lorem ipsum und Dim Sum ja ja ja. Lorem ipsum und Dim Sum ja ja ja. Lorem ipsum und Dim Sum ja ja ja. Lorem ipsum und Dim Sum ja ja ja. Lorem ipsum und Dim Sum ja ja ja.

Answer 3

Umschließen Sie den Zellinhalt in einem Flexblock. Als Bonus passt sich die Zelle automatisch der sichtbaren Breite an.

table {
  width: 100%;
}

div.parent {
  display: flex;
}

div.child {
  flex: 1;
  width: 1px;
  overflow-x: hidden;
  text-overflow: ellipsis;
}

          xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

Answer 4

Ich habe das gelöst, indem ich ein absolut positioniertes div innerhalb der Zelle (relativ) verwendet habe.

td {
    position: relative;
}
td > div {
    position: absolute;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;        
}

Das ist alles. Dann können Sie entweder einen top-Wert zum div hinzufügen oder es vertikal zentrieren:

td > div {      
    top: 0;
    bottom: 0;
    margin: auto 0;
    height: 1.5em; // = Zeilenhöhe 
}

Um etwas Platz auf der rechten Seite zu bekommen, können Sie die max-width etwas reduzieren.

Answer 5

Dies hat in meinem Fall sowohl in Firefox als auch in Chrome funktioniert:

td {
  max-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
}