CSS-Textüberlauf in einer Tabellenzelle?

500

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

Ich habe es versucht:

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

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

daGUY
quelle
9
Tabellenzellen funktionieren nicht overflowgut. Versuchen Sie, ein Div in die Zelle zu setzen und dieses Div zu stylen.
Herr Lister

Antworten:

898

Um Text mit Auslassungspunkten zu schneiden, wenn er eine Tabellenzelle überläuft, müssen Sie die max-widthCSS-Eigenschaft für jede tdKlasse festlegen, damit der Überlauf funktioniert. Es sind keine zusätzlichen Layout-Divs erforderlich

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

Für reaktionsschnelle Layouts; Verwenden Sie die max-widthCSS-Eigenschaft, um die effektive Mindestbreite der Spalte anzugeben, oder verwenden Sie sie nur max-width: 0;für unbegrenzte Flexibilität. Außerdem benötigt die enthaltende Tabelle normalerweise eine bestimmte Breite, width: 100%;und für die Spalten wird normalerweise die Breite als Prozentsatz der Gesamtbreite festgelegt

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

Historisch: Für IE 9 (oder weniger) muss dies in Ihrem HTML-Code enthalten sein, um ein IE-spezifisches Rendering-Problem zu beheben

<!--[if IE]>
<style>
    table {
        table-layout: fixed;
        width: 100px;
    }
</style>
<![endif]-->
TFD
quelle
7
Die Tabelle benötigt auch eine Breite, damit dies im IE funktioniert. jsfiddle.net/rBthS/69
Trevor Dixon
1
Wenn Sie festgelegt width: 100%;und min-width: 1px;die Zelle wird immer so breit wie möglich sein und nur drei Punkte verwenden , um den Text zu kürzen , wenn es benötigt (nicht , wenn die Elementbreite eine bestimmte Größe trifft) - das ist für ansprechende Layouts sehr nützlich ist.
Duncan Walker
2
@OzrenTkalcecKrznaric funktioniert es display: table-cellzwar, aber nicht, wenn das max-widthin Prozent (%) definiert ist. Getestet am FF 32
Greg
14
( Im Anschluss an dem oben) im Fall , dass Sie% Werte verwenden, dann nur unter Verwendung von table-layout: fixedauf dem Elemente mit display: tabledem Trick
Greg
1
Wie wäre es, wenn Sie möchten, dass die Breite der Spalten automatisch auf reaktionsschnelle Weise wie in einer reaktionsfähigen Bootstrap-Tabelle zugewiesen wird? Wenn Sie eine maximale Breite festlegen, wird dies beeinträchtigt. Gibt es eine Problemumgehung?
Nest
81

Das Angeben einer max-widthoder einer festen Breite funktioniert nicht in allen Situationen, und die Tabelle sollte flüssig sein und ihre Zellen automatisch platzieren. Dafür sind Tische da.

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

HTML:

<td class="ellipsis">
    <span>This Text Overflows and is too large for its cell.</span>
</td>

CSS:

.ellipsis {
    position: relative;
}
.ellipsis:before {
    content: '&nbsp;';
    visibility: hidden;
}
.ellipsis span {
    position: absolute;
    left: 0;
    right: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

Funktioniert mit IE9 und anderen Browsern.

AnthumChris
quelle
Hinweis: Diese Lösung verpackt Zellinhalte in <span>Elemente.
Roy Tinker
2
Dies ist eine wirklich clevere Lösung und funktioniert gut für alle Tabellen, für die ich eine Lösung benötigen würde. Sie müssen jedoch die Breite festlegen, wenn nicht alle Tabellenzellen dieselbe Breite haben sollen.
Kevin Beal
Wenn keine festen Breiten vorhanden sind, funktioniert diese Lösung am besten. Sehr klug!
Avidenic
1
Dies behält die vertikale Ausrichtung bei, wenn andere Lösungen display: blockdies nicht taten
j3ff
Einfach die beste Lösung aller Zeiten! Ziemlich genial. Ich danke dir sehr.
ClownCoder
39

Warum passiert das?

Es scheint, dass dieser Abschnitt auf w3.org vorschlägt, dass der Textüberlauf nur für Blockelemente gilt :

11.1.  Overflow Ellipsis: the ‘text-overflow’ property

text-overflow      clip | ellipsis | <string>  
Initial:           clip   
APPLIES TO:        BLOCK CONTAINERS               <<<<
Inherited:         no  
Percentages:       N/A  
Media:             visual  
Computed value:    as specified  

Das MDN sagt dasselbe .

Diese jsfiddle hat Ihren Code (mit ein paar Debug-Änderungen), der gut funktioniert, wenn er auf a divanstelle von a angewendet wird td. Es hat auch die einzige Problemumgehung, an die ich schnell denken könnte, indem ich den Inhalt von tdin einen enthaltenden divBlock einbinde. Das sieht für mich jedoch nach "hässlichem" Markup aus, also hoffe ich, dass jemand anderes eine bessere Lösung hat. Der Code zum Testen sieht folgendermaßen aus:

td, div {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  border: 1px solid red;
  width: 80px;
}
Works, but no tables anymore:
<div>Lorem ipsum and dim sum yeah yeah yeah. Lorem ipsum and dim sum yeah yeah yeah. Lorem ipsum and dim sum yeah yeah yeah. Lorem ipsum and dim sum yeah yeah yeah. Lorem ipsum and dim sum yeah yeah yeah.</div>

Works, but non-semantic markup required:
<table><tr><td><div>Lorem ipsum and dim sum yeah yeah yeah. Lorem ipsum and dim sum yeah yeah yeah. Lorem ipsum and dim sum yeah yeah yeah. Lorem ipsum and dim sum yeah yeah yeah. Lorem ipsum and dim sum yeah yeah yeah.</div></td></tr></table>

Jeroen
quelle
2
Nett, danke. Ich konnte die Tabellenzellen nicht aus meinem Markup entfernen. Stattdessen habe ich den Inhalt einfach in divs verpackt (deren Breite auf die Breite der Zellen eingestellt ist) und stattdessen den Überlauf dort angewendet. Lief wie am Schnürchen!
daGUY
28

Für den Fall, dass Sie keine feste Breite festlegen möchten

Mit der folgenden Lösung können Sie Tabellenzelleninhalte erstellen, die lang sind, jedoch weder die Breite der übergeordneten Tabelle noch die Höhe der übergeordneten Zeile beeinflussen dürfen. Wenn Sie beispielsweise eine Tabelle haben möchten, wird die width:100%automatische Größenfunktion weiterhin auf alle anderen Zellen angewendet. Nützlich in Datengittern mit der Spalte "Notizen" oder "Kommentar" oder so.

Geben Sie hier die Bildbeschreibung ein

Fügen Sie Ihrem CSS diese 3 Regeln 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, in der Sie einen dynamischen Textüberlauf wünschen:

<td>
  <span class="text-overflow-dynamic-container">
    <span class="text-overflow-dynamic-ellipsis" title="...your text again for usability...">
      //...your long text here...
    </span>
  </span>
</td>

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

Natürlich die Geige: https://jsfiddle.net/9wycg99v/23/

Alph.Dev
quelle
Die hilfreichste Antwort: Die dynamische Ellipse ist einfach fantastisch.
Lucifer63
Es bringt die ausgewählten Breitenbeschränkungen jeder Spalte durcheinander, z. B. wenn Sie einige Spalten definiert haben max-width: X, die jetzt breiter sein können - ich dachte, dies liegt an display: flexder Verwendung, aber ich habe das entfernt und sehe keinen Unterschied ...
user9645
24

Es scheint, dass, wenn Sie table-layout: fixed;auf dem tableElement angeben , dann Ihre Stile fürtd wirksam werden. Dies wirkt sich jedoch auch auf die Größe der Zellen aus.

Sitepoint erläutert die Methoden für das Tabellenlayout hier ein wenig: http://reference.sitepoint.com/css/tableformatting

Jongala
quelle
2
Dies sollte die richtige Antwort sein, wenn Sie die Breite der Tabelle nicht angeben möchten.
Adria
20

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

Ohne Verwendung max-widthoder prozentuale Spaltenbreiten table-layout: fixedusw.

https://jsfiddle.net/tturadqq/

Wie es funktioniert:


Schritt 1: Lassen Sie einfach das automatische Layout der Tabelle seine Sache machen.

Wenn eine oder mehrere Spalten mit viel Text vorhanden sind, werden die anderen Spalten so weit wie möglich verkleinert und der Text der langen Spalten umbrochen:

Geben Sie hier die Bildbeschreibung ein


Schritt 2: Wickeln Sie den Zelleninhalt in ein Div und setzen Sie dieses Div auf max-height: 1.1em

(Das zusätzliche 0.1em gilt für Zeichen, die etwas unterhalb der Textbasis gerendert werden, z. B. das Ende von 'g' und 'y').

Geben Sie hier die Bildbeschreibung ein


Schritt 3: Stellen Sie titledie Divs ein

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

Geben Sie hier die Bildbeschreibung ein


Schritt 4: Fügen Sie ::afterdem div ein CSS hinzu

Das ist das Knifflige. Wir setzen ein CSS::after mit content: attr(title), positionieren es dann über dem div und setzen text-overflow: ellipsis. Ich habe es hier rot gefärbt, um es klar zu machen.

(Beachten Sie, dass die lange Spalte jetzt eine Endellipse hat.)

Geben Sie hier die Bildbeschreibung ein


Schritt 5: Stellen Sie die Farbe des Div-Textes auf ein transparent

Und wir sind fertig!

Geben Sie hier die Bildbeschreibung ein

Cameron Price-Austin
quelle
2
Das ist eine großartige und perfekte Lösung! Ich frage mich, warum dies eine negative Stimme anstelle der meisten positiven Stimmen hat !!
Zendu
2
Toller Kerl! (@ user9645 - das ist nicht richtig: Lassen Sie es mit einer Tabelle arbeiten, die mit Vue.js gerendert wurde - stellen Sie sicher, dass die Titel auf den Divs und nicht auf den TDs stehen)
Christian Opitz
@ChristianOpitz - Ja, ich muss es irgendwie durcheinander gebracht haben ... habe es erneut versucht und es funktioniert.
user9645
Ich habe festgestellt, dass dieser Ansatz fehlschlägt, wenn er <a>anstelle einer <div>Tabellenzelle verwendet wird. Das Hinzufügen word-break: break-all;löst das Problem. Beispiel: jsfiddle.net/de0bjmqv
zendu
Einfach toll. Und Sie müssen nicht einmal den gleichen Text in den Zellen haben (Titel sind genug), und dann brauchen Sie keine maximale Höhe: 1.1em usw. - alles, was Sie für die divs brauchen, ist position: relative;.
KS74
13

Wenn die prozentuale Tabellenbreite angegeben ist oder Sie keine feste Breite für die Tabellenzelle festlegen können. Sie können sich bewerben table-layout: fixed;, damit es funktioniert.

table {
  table-layout: fixed;
  width: 100%;
}
td {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  border: 1px solid red;
}
<table>
  <tr>
    <td>Lorem ipsum and dim sum yeah yeah yeah. Lorem ipsum and dim sum yeah yeah yeah. Lorem ipsum and dim sum yeah yeah yeah. Lorem ipsum and dim sum yeah yeah yeah. Lorem ipsum and dim sum yeah yeah yeah.</td>
    <td>Lorem ipsum and dim sum yeah yeah yeah. Lorem ipsum and dim sum yeah yeah yeah. Lorem ipsum and dim sum yeah yeah yeah. Lorem ipsum and dim sum yeah yeah yeah. Lorem ipsum and dim sum yeah yeah yeah.</td>
  </tr>
</table>

Aufkleber
quelle
5

Wickeln Sie den Zelleninhalt in einen Flexblock. Als Bonus passt die Zelle automatisch die sichtbare Breite an.

table {
  width: 100%;
}

div.parent {
  display: flex;
}

div.child {
  flex: 1;
  width: 1px;
  overflow-x: hidden;
  text-overflow: ellipsis;
}
<table>
  <tr>
    <td>
      <div class="parent">
        <div class="child">
          xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
        </div>
      <div>
    </td>
  </tr>
</table>

abbr
quelle
3
Ich musste auch white-space: nowrap;der childKlasse hinzufügen .
Ross Allen
3

Ich habe dies mit einem absolut positionierten Div innerhalb der Zelle (relativ) gelöst.

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

Das ist es. Dann können Sie dem div entweder einen top: value hinzufügen oder ihn vertikal zentrieren:

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

Um auf der rechten Seite etwas Platz zu haben, können Sie die maximale Breite etwas reduzieren.

Kjetil Hansen
quelle
Es wäre schön mit einer JSFiddle, wie viele der anderen Antworten auf diese beliebte Frage.
Oma
Ja, das funktioniert, aber ich habe ein bisschen andere Stile für divs verwendet: left: 0; top: 0; right: 0; bottom: 0; padding: 2px; um die richtige Position zu erhalten und die gleiche Polsterung wie in den Zellen der Tabelle zu haben.
KS74
0

Dies funktionierte in meinem Fall sowohl in Firefox als auch in Chrome:

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

Dies ist die Version, die in IE 9 funktioniert.

http://jsfiddle.net/s27gf2n8/

<div style="display:table; table-layout: fixed; width:100%; " >
        <div style="display:table-row;">
            <div style="display:table-cell;">
                <table style="width: 100%; table-layout: fixed;">
                    <div style="text-overflow:ellipsis;overflow:hidden;white-space:nowrap;">First row. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>
                </table>
            </div>
            <div style="display:table-cell;">
                Top right Cell.
            </div>
        </div>
        <div style="display:table-row;">
            <div style="display:table-cell;">
                <table style="width: 100%; table-layout: fixed;">
                    <div style="text-overflow:ellipsis;overflow:hidden;white-space:nowrap;">Second row - Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>
                </table>
            </div>
            <div style="display:table-cell;">
                Bottom right cell.
            </div>
        </div>
    </div>
Ryan O'Connell
quelle
6
ein <div> als direktes Kind von <table>? Das scheint nicht richtig zu sein!
Michiel
@michiel FYI - Browser können Divs unter Tabellen-Tags verarbeiten.
Ryan O'Connell