Wie wirken sich CSS „width: auto' und „max-width' auf den Überlauf und das Umbrechen von Tooltip-Inhalten aus?

Verhalten von Tooltip-Inhaltsüberläufen

Beim Erstellen eines Tooltips mit CSS erwarten Sie möglicherweise, dass sich die Breite automatisch an die Länge des Inhalts anpasst, wobei die Grenzen durch festgelegt werden Eigenschaften „min-width“ und „max-width“. Das Verhalten unterscheidet sich jedoch, wenn der Inhalt in mehrere Zeilen umgebrochen wird.

Problem und Verhalten

Das Problem entsteht durch die Einstellung von width: auto und max-width: 250px. Während „width: auto“ das Verkleinern des Tooltips ermöglicht, um es an den Inhalt anzupassen, begrenzt „max-width“ seine Erweiterung auf 250 Pixel. Dieses Verhalten wird deutlich, wenn ein langes Wort am Ende einer Zeile dazu führt, dass der Text umgebrochen wird und auf der rechten Seite des Tooltips ein deutlicher Abstand entsteht.

Erklärung

Ein Browser berechnet die Breite des Tooltips indem Sie versuchen, den Text innerhalb der maximal zulässigen Breite (250 Pixel) fließen zu lassen. Überschüssiger Text wird in nachfolgende Zeilen umgebrochen. Sobald der Text jedoch umbrochen wird, ist die Breite des Felds auf 250 Pixel festgelegt, da dies das im CSS angegebene Maximum ist. Es wird nicht verkleinert, um die verringerte Textbreite nach dem Umbrechen zu berücksichtigen.

Lösung

Leider gibt es keine einfache Lösung, um dieses Verhalten zu ändern. Der Textumbruch verhindert von Natur aus, dass das Feld nach Zeilenumbrüchen kleiner wird. Daher kann der erwartete Verkleinerungs- oder Vergrößerungseffekt mit diesen CSS-Eigenschaften nicht erreicht werden.

Das obige ist der detaillierte Inhalt vonWie wirken sich CSS „width: auto' und „max-width' auf den Überlauf und das Umbrechen von Tooltip-Inhalten aus?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!