Warum funktioniert „overflow:hidden' nicht in „My Table Cells' ()?

Overflow funktioniert nicht in : Ein CSS-Fix

Overflow:hidden funktioniert möglicherweise nicht wie erwartet in

; Elemente, was dazu führt, dass uneingeschränkter Text über die vorgesehene Breite der Zelle hinausläuft. Um dieses Problem zu lösen, müssen wir tiefer in die beteiligten CSS-Eigenschaften eintauchen.

Der Kern des Problems liegt im Standardverhalten von Tabellenelementen. Tabellen verwenden normalerweise ein fließendes Layout, bei dem sich die Zellenbreite je nach Inhalt vergrößert und verkleinert. Um dies zu überschreiben, müssen wir ein festes Tabellenlayout angeben:

table {
  table-layout: fixed;
}

Darüber hinaus begrenzt die Festlegung einer festen Breite für den Tabellencontainer die Gesamtgröße, die den Tabellenzellen zur Verfügung steht:

table {
  ...
  width: 200px;  

Um den Inhalt der Zelle schließlich wirklich einzuschränken, wenden wir overflow:hidden auf die Tabellenzellen und white-space:nowrap an, um Word zu verhindern wrap:

td {
  ...
  overflow: hidden;
  white-space: nowrap;
}

Diese kombinierten Optimierungen stellen sicher, dass der Textinhalt am Rand der Zelle abgeschnitten wird, sodass er nicht überläuft.

Beispiel

Betrachten Sie dieses modifizierte Beispiel:

Nun, Der Text wird wie gewünscht bei der Zellenbreite von 100 Pixel abgeschnitten.

Das obige ist der detaillierte Inhalt vonWarum funktioniert „overflow:hidden' nicht in „My Table Cells' ()?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!