Auslassungspunkteeffekt anzeigen, wenn der Inhalt einer Tabellenzelle den Wert überschreitet (Implementierungscode)

veranschaulichen

Bei der Front-End-Entwicklung treten häufig Situationen auf, in denen Sie die Zellenbreite begrenzen und Auslassungspunkte für den Teil anzeigen müssen, in dem der Inhalt die Begrenzung überschreitet. Hier finden Sie eine kurze Einführung zum Erreichen dieses Effekts.

Vorbereitendes Wissen

1. Kontrolltext ohne Zeilenumbruch

Leerzeichen: Nowrap;

2. Wenn die Länge überschritten wird, erscheint eine Ellipse

Überlauf: versteckt;

Textüberlauf: Auslassungspunkte

3. Ändern Sie den Tabellenlayoutalgorithmus

table-layout:fixed; Der Standardwert von table-layout ist automatisch, was bedeutet, dass die Spaltenbreite durch den Zelleninhalt bestimmt wird. Fest bedeutet, dass die Spaltenbreite durch die Tabellenbreite und die Spaltenbreite festgelegt wird.

Das heißt, wenn Sie die Spaltenbreite für die Tabelle festlegen, funktioniert dies tatsächlich nicht. Wenn die Zelle zu viel Inhalt enthält, wird die Breite trotzdem erweitert. Wenn die Spaltenbreite der Tabelle durch die Spaltenbreite bestimmt werden soll, die Sie für die Zelle definieren, müssen Sie den festen Wert verwenden.

Hinweis: 1. Die Tabellenbreite muss festgelegt werden. 2. Wenn Sie nur die Tabellenbreite festlegen, ohne die Spaltenbreite festzulegen, werden die Spaltenbreiten gleichmäßig verteilt.

Code-Demonstration

Wie im folgenden Code gezeigt, hat die Tabelle vier Spalten: Name, Alter, Geschlecht und Adresse. Die Längen dieser Spalten betragen jeweils 10 %, 20 %, 30 % und 40 %.

Der Anzeigeeffekt ist wie folgt:

Es ist leicht zu erkennen, dass die Längen der Spalten „Name“, „Alter“, „Geschlecht“ und „Adresse“ jeweils 10 %, 20 %, 30 % und 40 % betragen.

Wenn der Inhalt des Vornamens erhöht wird, ist der Effekt einfach unerträglich anzusehen (＞﹏＜)!

Ich kann es nicht ertragen, es anzusehen (＞﹏＜)! !

Wie wird der Teil, der über eine einzelne Zeile hinausgeht, als Auslassungspunkte angezeigt? Sie müssen lediglich die Zelleigenschaften wie folgt festlegen:

Nach der Änderung ist der Effekt wie folgt:

Der obige Artikel über die Anzeige des Auslassungseffekts, wenn der Inhalt einer Tabellenzelle das Limit überschreitet (Implementierungscode), ist der gesamte Inhalt, den der Editor mit Ihnen teilt. Ich hoffe, er kann Ihnen als Referenz dienen. Ich hoffe auch, dass Sie 123WORDPRESS.COM unterstützen werden.