So fügen Sie eine Ellipsenfunktion in eine Tabelle ein

Dieses Mal zeige ich Ihnen, wie Sie die Ellipsenfunktion in die Tabellentabelle einfügen. Das Folgende ist ein praktischer Fall. Schauen wir uns das an.

1. Ursache

Nach Erhalt einer Anfrage wurde gesagt, dass Ellipsen verwendet werden sollten, wenn zu viele Wörter vorhanden sind. Es ist natürlich, an Textüberlauf zu denken (, Hinweis: overflow:hidden; text-overflow:ellipsis; white-space:nowrap muss zusammen verwendet werden), aber es funktioniert nicht in der Tabelle. Baidu sagte sofort, dass Sie das Tabellenlayout festlegen müssen, um zu funktionieren : am Tabellenelement behoben, und es hat funktioniert.

2. Voraussetzung dafür, dass text-overflow:ellipsis funktioniert

Stellen Sie sicher, dass Sie die Breite des Containers definieren (Hervorhebung)

Wenn der Überlauf fehlt; Text wird horizontal gestreckt. Einfach nach außen

Wenn der Text „white-space:nowrap;“ fehlt, wird die Höhe des Containers nach unten verschoben, selbst wenn Sie die Höhe definieren, werden die Ellipsen nicht angezeigt und der überschüssige Text wird abgeschnitten

Wenn text-overflow:ellipsis; fehlt, wird der überschüssige Text abgeschnitten, was der Definition von text-overflow:clip

3 entspricht obiger wichtiger Punkt

Stellen Sie sicher, dass Sie die Breite des Containers definieren. Aus diesem Grund funktioniert table-layout: behoben, aber table-layout: auto (Tabellenelement ist standardmäßig auf auto eingestellt) Der folgende Absatz ist aus der CSS2.1-Spezifikation der chinesischen Version:

'table-layout'
Wert: auto | fest |.
Anfänglich: auto
Gilt für: 'table' und 'inline-table ' Elemente
Geerbt: nein
Prozentsätze: N/A
Medien: visuell
Berechneter Wert: Gleich wie der angegebene Wert

Das Attribut „table-layout“ steuert den verwendeten Algorithmus für Tabellenzellen-, Zeilen- und Spaltenlayout. Die Bedeutung des Werts ist wie folgt:
fest: Festen Tabellenlayout-Algorithmus verwenden
auto: Beliebigen automatischen Tabellenlayout-Algorithmus verwenden

(Der Unterschied zwischen fest und automatisch besteht darin, dass einer fest ist und der andere ist automatisch)

Im Folgenden werden diese beiden Algorithmen beschrieben:

Im festen Tabellenlayout-Algorithmus (fest) wird die Breite jeder Spalte durch die folgenden Regeln bestimmt:

Eine Spalte, deren Breitenattributwert nicht „auto“ ist. Die Breite der Spalte, in der sich das Element befindet, wird auf den Breitenwert

festgelegt. Andernfalls wird die Breite der Spalte durch die Zellen in der ersten bestimmt Zeile, deren Breitenattributwert nicht „auto“ ist. Wenn sich die Zelle über mehrere Spalten erstreckt, wird die Breite auf die Spalten aufgeteilt

Alle verbleibenden Spalten werden gleichmäßig auf den verbleibenden horizontalen Tabellenbereich aufgeteilt (abzüglich der Ränder oder des Zellenabstands)

Wie in 3 erwähnt, Alle verbleibenden Spalten teilen den verbleibenden horizontalen Tabellenbereich gleichmäßig auf. Die tatsächliche Situation ist, dass die Tabelle die Breite der verbleibenden Spalten gleichmäßig teilt und die feste Breite jeder Spalte die verbleibende Breite/Anzahl der verbleibenden Spalten ist. text-overflow Die Voraussetzung dafür Damit :ellipsis funktioniert, muss die Breite des Containers definiert werden, also funktioniert „fixed“

Im automatischen Tabellenlayout-Algorithmus (fest) wird die Spaltenbreite durch die folgenden Schritte bestimmt:

Berechnen Sie jeweils die Mindestinhaltsbreite (MCW) der Zellen: Formatierter Inhalt kann sich über eine beliebige Anzahl von Zeilen erstrecken, darf jedoch nicht über die Zelle hinauslaufen. Wenn die angegebene „Breite“ (W) der Zelle größer als MCW ist, ist W die minimale Zellenbreite. Der Wert „auto“ gibt an, dass das MCW die minimale Zellenbreite ist. Dann wird die „maximale“ Breite jeder Zelle berechnet: Formatieren Sie den Inhalt, unabhängig von Zeilenumbrüchen außer expliziten Zeilenumbrüchen.

Für jede Spalte , start from just Bestimmt eine maximale und minimale Spaltenbreite zwischen den Zellen, die die Spalte umfassen. Die minimale Spaltenbreite ist die minimal erforderliche Spaltenbreite, je nachdem, welche der größten der minimalen Zellenbreiten (oder Spaltenbreite, je nachdem, welcher Wert größer ist) ist. Die maximale Spaltenbreite ist die maximale Spaltenbreite, die für die größte der maximalen Zellenbreiten (oder Spaltenbreite, je nachdem, welcher Wert größer ist) erforderlich ist.

Erhöhen Sie für jede Zelle, die sich über mehrere Spalten erstreckt, die Mindestbreite der Spalten, sodass sie mindestens so breit wie die Zellen sind. Das Gleiche gilt für die maximale Breite. Wenn möglich, erweitern Sie alle übergreifenden Spalten auf ungefähr die gleiche Breite.

Erhöhen Sie für jedes Spaltengruppenelement, dessen „Breite“ nicht „auto“ ist, die Mindestbreite der Spalten, die es überspannt, sodass sie mindestens genauso breit sind as Die „Breite“ der Spaltengruppe ist gleich breit

Tatsächlich sind einige Dinge sehr einfach, aber darüber zu sprechen ist verwirrend. . .
Wie in 1 erwähnt, ist W die minimale Zellenbreite, wenn die von der Zelle angegebene „Breite“ (W) größer als MCW ist. Der Wert „auto“ gibt an, dass MCW die minimale Zellenbreite ist.

**Fall 1: Wenn W > MCW, ist W die minimale Zellenbreite, was darauf hinweist, dass Spaltenbreite = W ist, die Spaltenbreite Platz für Text bietet und keine Ellipsen erforderlich sind.
Fall 2: Wenn W **
Wenn Sie Ellipsen verwenden möchten, ohne table-layout:fixed zu verwenden, also unter der Voraussetzung von table-layout:auto, können Sie wie folgt vorgehen (ein weiteres Element in td festlegen und ein weiteres hinzufügen). Element zu diesem Element (Auslassungspunkte festlegen)

<style>div {  width: 100px;
}.ellipsis {  text-overflow:ellipsis;  overflow: hidden; 
  text-overflow:ellipsis; 
  white-space:nowrap;
}</style>...<td>
  <div class="ellipsis">
    xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx  </div></td>...

Ich glaube, Sie haben die Methode beherrscht, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Verwandte Lektüre:

So verwenden Sie das Pseudoelement „erster Buchstabe“, um den ersten Buchstaben des Textes groß zu schreiben

Detaillierte Beschreibung Erläuterung des Counters-Attributs von CSS

Ausführliche Erklärung der Funktionsüberladung in JavaScript

Wie Front-End- und Back-End-Daten wissenschaftlich interagieren sollten

Das obige ist der detaillierte Inhalt vonSo fügen Sie eine Ellipsenfunktion in eine Tabelle ein. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!