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

Um Text mit einem Auslassungspunkt abzuschneiden, wenn es den Inhalt einer Tabellenzelle überläuft, müssen Sie die CSS-Eigenschaft max-width für jede td-Klasse festlegen, damit das Überlaufen funktioniert. Es sind keine zusätzlichen Layout-div-Elemente erforderlich:

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

Für reaktionsschnelle Layouts; verwenden Sie die CSS-Eigenschaft max-width, um die effektive minimale Breite der Spalte anzugeben, oder verwenden Sie einfach max-width: 0; für unbegrenzte Flexibilität. Außerdem benötigt die enthaltende Tabelle eine spezifische Breite, typischerweise width: 100%;, und die Spalten haben normalerweise ihre Breite als Prozentsatz der Gesamtbreite festgelegt

table {width: 100%;}
td
{
 max-width: 0;
 overflow: hidden;
 text-overflow: ellipsis;
 white-space: nowrap;
}
td.column_a {width: 30%;}
td.column_b {width: 70%;}

Historisch: Für den IE 9 (oder weniger) müssen Sie dies in Ihrem HTML haben, um ein IE-spezifisches Renderingproblem zu beheben

Answer 2

Das Festlegen einer max-width oder einer festen Breite funktioniert nicht in allen Situationen und die Tabelle sollte flüssig sein und ihre Zellen automatisch platzieren. Dafür sind Tabellen da. Funktioniert in IE9 und anderen Browsern.

Verwenden Sie dies: http://jsfiddle.net/maruxa1j/

table {
    width: 100%;
}
.first {
    width: 50%;
}
.ellipsis {
    position: relative;
}
.ellipsis:before {
    content: ' ';
    visibility: hidden;
}
.ellipsis span {
    position: absolute;
    left: 0;
    right: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

            Header 1
            Header 2
            Header 3
            Header 4

            Dieser Text läuft über und ist zu groß für seine Zelle.
            Dieser Text läuft über und ist zu groß für seine Zelle.
            Dieser Text läuft über und ist zu groß für seine Zelle.
            Dieser Text läuft über und ist zu groß für seine Zelle.

Answer 3

Warum passiert das?

Es scheint, dass dieser Abschnitt auf w3.org darauf hinweist, dass text-overflow nur auf Blockelemente angewendet wird:

11.1.  Overflow Ellipsis: die Eigenschaft 'text-overflow'

text-overflow      clip | ellipsis |   
Initial:           clip   
ANWENDBAR AUF:     BLOCKKONTAINER               <<<<
Vererbt:           nein  
Prozentsätze:      n/a  
Medien:            visuell  
Berechneter Wert:  wie spezifiziert  

Das MDN sagt dasselbe.

Dieses jsfiddle enthält Ihren Code (mit einigen Debug-Änderungen), der funktioniert, wenn er auf ein div anstelle eines td angewendet wird. Es enthält auch den einzigen Workaround, an den ich schnell gedacht habe, indem der Inhalt des td in einem enthaltenden div Block gewickelt wird. Allerdings sieht das für mich nach "hässlichem" Markup aus, also hoffe ich, dass jemand eine bessere Lösung hat. Der Code zum Testen sieht so aus:

td, div {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  border: 1px solid red;
  width: 80px;
}

Funktioniert, aber keine Tabellen mehr:
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.

Funktioniert, aber nicht semantisches Markup erforderlich:
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 4

Falls Sie nichts auf eine feste Breite setzen möchten

Die Lösung unten ermöglicht es Ihnen, Tabellenzelleninhalte zu haben, die lang sind, aber die Breite der übergeordneten Tabelle nicht beeinflussen dürfen, noch die Höhe der übergeordneten Zeile. Zum Beispiel, wenn Sie eine Tabelle mit width:100% haben möchten, die trotzdem die automatische Größenanpassung auf alle anderen Zellen anwendet. Nützlich in Datenrastern mit einer "Notizen" oder "Kommentar" Spalte oder so etwas.

Fügen Sie diese 3 Regeln zu Ihrem CSS hinzu:

.text-overflow-dynamic-container {
    position: relative;
    max-width: 100%;
    padding: 0 !important;
    display: -webkit-flex;
    display: -moz-flex;
    display: flex;
    vertical-align: text-bottom !important;
}
.text-overflow-dynamic-ellipsis {
    position: absolute;
    white-space: nowrap;
    overflow-y: visible;
    overflow-x: hidden;
    text-overflow: ellipsis;
    -ms-text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    max-width: 100%;
    min-width: 0;
    width:100%;
    top: 0;
    left: 0;
}
.text-overflow-dynamic-container:after,
.text-overflow-dynamic-ellipsis:after {
    content: '-';
    display: inline;
    visibility: hidden;
    width: 0;
}

Formatieren Sie HTML wie folgt in jeder Tabellenzelle, für die Sie einen dynamischen Textüberlauf möchten:

      //...Ihr langer Text hier...

Wenden Sie zusätzlich die gewünschte min-width auf die Tabellenzelle an (oder gar keine).

Natürlich das Beispiel: https://jsfiddle.net/9wycg99v/23/

Answer 5

Wenn Sie möchten, dass die Tabelle automatisch angeordnet wird

Ohne die Verwendung von max-width oder prozentualen Spaltenbreiten oder table-layout: fixed usw.

https://jsfiddle.net/tturadqq/

Wie es funktioniert:

---

Schritt 1: Lassen Sie die automatische Anordnung der Tabelle einfach machen.

Wenn es eine oder mehrere Spalten mit viel Text gibt, werden die anderen Spalten so weit wie möglich verkleinert und der Text der langen Spalten umgebrochen:

---

Schritt 2: Umschließen Sie die Zellinhalte in einem div und setzen Sie dann dieses div auf max-height: 1.1em

(die zusätzlichen 0,1em sind für Zeichen, die etwas unterhalb der Textgrundlinie rendern, wie der Schwanz von 'g' und 'y')

---

Schritt 3: Setzen Sie title auf die divs

Dies ist gut für die Zugänglichkeit und ist für den kleinen Trick erforderlich, den wir gleich verwenden werden.

---

Schritt 4: Fügen Sie ein CSS-::after auf die div hinzu

Das ist der trickreiche Teil. Wir setzen ein CSS-::after mit content: attr(title), positionieren das dann oben auf der div und setzen text-overflow: ellipsis. Ich habe es hier rot eingefärbt, um es deutlich zu machen.

(Beachten Sie, wie die lange Spalte jetzt einen abschließenden Auslasspunkt hat)

---

Schritt 5: Setzen Sie die Farbe des div-Textes auf transparent

Und fertig!