Wie funktioniert die Textüberlauf-Ellipse in Tabellenzellen?

Die schwer fassbaren Auslassungspunkte: Die CSS-Herausforderung in Tabellenzellen aufdecken

Stellen Sie sich ein einfaches Szenario vor: Sie möchten einen langen Text in einer Tabellenzelle anzeigen und gleichzeitig deren Breite einschränken bis 50 Pixel. Natürlich verwenden Sie CSS-Eigenschaften, um dies zu erreichen: Textüberlauf: Ellipsis, Leerraum: Nowrap und eine festgelegte Breite. Zu Ihrer Überraschung sind die Auslassungspunkte jedoch nirgends zu finden, was Sie verwirrt.

Um das Problem zu verstehen, werfen wir einen Blick auf die CSS-Spezifikation. Die Eigenschaft text-overflow wirkt sich auf Inline-Elemente aus, bei denen es sich bei Tabellenzellen standardmäßig nicht handelt. Um die Auslassungspunkte zu aktivieren, müssen wir explizit display:block oder display:inline-block für die Tabellenzellen festlegen. Dadurch erhalten sie ein Inline-ähnliches Verhalten, sodass die Eigenschaft text-overflow wirksam wird.

Alternativ können Sie sich für einen anderen Ansatz entscheiden. Durch Festlegen des Tabellenlayouts: behoben; Für die Tabelle und die Angabe ihrer Breite erzwingen Sie, dass die Breite gleichmäßig über die Zellen verteilt wird. Dies ermöglicht effektiv auch Auslassungspunkte innerhalb der Zellen.

So würde der Code mit diesen Lösungen aussehen:

<code class="css">td {
  display: block; /* or inline-block */
  border: 1px solid black;
  width: 50px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}</code>

oder

<code class="css">table {
  table-layout: fixed;
  width: 150px;
}
td {
  border: 1px solid black;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}</code>

Die Implementierung einer dieser Lösungen wird Beheben Sie das Problem, damit die Auslassungspunkte in Tabellenzellen wie vorgesehen funktionieren.

Das obige ist der detaillierte Inhalt vonWie funktioniert die Textüberlauf-Ellipse in Tabellenzellen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!