Wie implementiert man einen CSS-Textüberlauf mit Auslassungspunkten in einer Tabellenzelle?

CSS-Textüberlauf in einer Tabellenzelle

Das Ziel besteht darin, einen CSS-Textüberlauf in einer Tabellenzelle zu implementieren, um sicherzustellen, dass Text über das hinausgeht Die Breite der Zelle wird mit einem Auslassungszeichen abgeschnitten, wodurch verhindert wird, dass sie zu einem Vielfachen umgebrochen wird Zeilen.

Versuch:

Ein erster Versuch wurde mit dem folgenden CSS durchgeführt:

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

Allerdings die Eigenschaft „white-space: nowrap“. führte dazu, dass sich der Text und seine Zelle auf unbestimmte Zeit nach rechts ausdehnten und über die Tabelle hinausgingen Container.

Lösung:

Um den gewünschten Effekt zu erzielen, muss die CSS-Eigenschaft „max-width“ für jede Tabellenzelle festgelegt werden. Hier ist ein Beispiel:

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

Durch Festlegen der maximalen Breite wird sichergestellt, dass der Überlauf innerhalb der angegebenen Breite enthalten ist.

Responsive Layouts:

Erwägen Sie für responsive Layouts die Verwendung von „max-width“, um die Mindestbreite der Spalte anzugeben, oder die Festlegung auf „max-width: 0“. für volle Flexibilität. Die enthaltende Tabelle sollte eine bestimmte Breite haben, z. B. width: 100 %;.

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%;}

IE-Überlegungen:

Für IE 9 oder früher der folgende HTML-Code Hack ist notwendig, um ein Rendering-Problem zu beheben:

<!--[if IE]>
<style>
table {table-layout: fixed; width: 100px;}
</style>
<![endif]-->

Das obige ist der detaillierte Inhalt vonWie implementiert man einen CSS-Textüberlauf mit Auslassungspunkten in einer Tabellenzelle?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!