Ich möchte CSS text-overflow
in 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: nowrap
scheint 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.
overflow
gut. Versuchen Sie, ein Div in die Zelle zu setzen und dieses Div zu stylen.Antworten:
Um Text mit Auslassungspunkten zu schneiden, wenn er eine Tabellenzelle überläuft, müssen Sie die
max-width
CSS-Eigenschaft für jedetd
Klasse festlegen, damit der Überlauf funktioniert. Es sind keine zusätzlichen Layout-Divs erforderlichFür reaktionsschnelle Layouts; Verwenden Sie die
max-width
CSS-Eigenschaft, um die effektive Mindestbreite der Spalte anzugeben, oder verwenden Sie sie nurmax-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 festgelegtHistorisch: Für IE 9 (oder weniger) muss dies in Ihrem HTML-Code enthalten sein, um ein IE-spezifisches Rendering-Problem zu beheben
quelle
width: 100%;
undmin-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.display: table-cell
zwar, aber nicht, wenn dasmax-width
in Prozent (%) definiert ist. Getestet am FF 32table-layout: fixed
auf dem Elemente mitdisplay: table
dem TrickDas Angeben 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 Tische da.Verwenden Sie dies: http://jsfiddle.net/maruxa1j/
HTML:
CSS:
Funktioniert mit IE9 und anderen Browsern.
quelle
<span>
Elemente.display: block
dies nicht tatenWarum passiert das?
Es scheint, dass dieser Abschnitt auf w3.org vorschlägt, dass der Textüberlauf nur für Blockelemente gilt :
Das MDN sagt dasselbe .
Diese jsfiddle hat Ihren Code (mit ein paar Debug-Änderungen), der gut funktioniert, wenn er auf a
div
anstelle von a angewendet wirdtd
. Es hat auch die einzige Problemumgehung, an die ich schnell denken könnte, indem ich den Inhalt vontd
in einen enthaltendendiv
Block 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:quelle
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.Fügen Sie Ihrem CSS diese 3 Regeln hinzu:
Formatieren Sie HTML wie folgt in jeder Tabellenzelle, in der Sie einen dynamischen Textüberlauf wünschen:
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/
quelle
max-width: X
, die jetzt breiter sein können - ich dachte, dies liegt andisplay: flex
der Verwendung, aber ich habe das entfernt und sehe keinen Unterschied ...Es scheint, dass, wenn Sie
table-layout: fixed;
auf demtable
Element 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
quelle
Wenn Sie nur möchten, dass die Tabelle automatisch angeordnet wird
Ohne Verwendung
max-width
oder prozentuale Spaltenbreitentable-layout: fixed
usw.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:
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').
Schritt 3: Stellen Sie
title
die Divs einDies ist gut für die Zugänglichkeit und für den kleinen Trick, den wir gleich anwenden werden, notwendig.
Schritt 4: Fügen Sie
::after
dem div ein CSS hinzuDas ist das Knifflige. Wir setzen ein CSS
::after
mitcontent: attr(title)
, positionieren es dann über dem div und setzentext-overflow: ellipsis
. Ich habe es hier rot gefärbt, um es klar zu machen.(Beachten Sie, dass die lange Spalte jetzt eine Endellipse hat.)
Schritt 5: Stellen Sie die Farbe des Div-Textes auf ein
transparent
Und wir sind fertig!
quelle
<a>
anstelle einer<div>
Tabellenzelle verwendet wird. Das Hinzufügenword-break: break-all;
löst das Problem. Beispiel: jsfiddle.net/de0bjmqvWenn 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.quelle
Wickeln Sie den Zelleninhalt in einen Flexblock. Als Bonus passt die Zelle automatisch die sichtbare Breite an.
quelle
white-space: nowrap;
derchild
Klasse hinzufügen .Ich habe dies mit einem absolut positionierten Div innerhalb der Zelle (relativ) gelöst.
Das ist es. Dann können Sie dem div entweder einen top: value hinzufügen oder ihn vertikal zentrieren:
Um auf der rechten Seite etwas Platz zu haben, können Sie die maximale Breite etwas reduzieren.
quelle
Dies funktionierte in meinem Fall sowohl in Firefox als auch in Chrome:
quelle
Dies ist die Version, die in IE 9 funktioniert.
http://jsfiddle.net/s27gf2n8/
quelle