Wie interagieren CSS „width' und „max-width' mit dem Textumbruch?

CSS-Breite und maximale Breite beim Zeilenumbruch: Verhalten verstehen

Beim Definieren der Breite von Elementen mithilfe von CSS werden die Breite und die maximale Breite Breiteneigenschaften spielen eine wichtige Rolle. Während width die genaue Breite eines Elements festlegt, gibt max-width die maximal zulässige Breite an. Das Verhalten dieser Eigenschaften kann jedoch unerwartet sein, wenn Text innerhalb des Elements umbrochen wird.

Beachten Sie den folgenden CSS-Code:

#tooltip {
    position: absolute;
    width: auto;
    min-width: 50px;
    max-width: 250px;
    padding: 10px;
    background-color: #eee;
    border: 1px solid #aaa;
}

Gemäß dem bereitgestellten Code ist dies zu erwarten dass sich die Breite des Tooltips dynamisch an seinen Inhalt anpasst, mit einer Mindestbreite von 50 Pixeln und einer Maximalbreite von 250 Pixeln. Es wurde jedoch beobachtet, dass, wenn der Text in der QuickInfo in eine neue Zeile umgebrochen wird, die Eigenschaft „max-width“ die Eigenschaft „width“ überschreibt, was zu einem unansehnlichen Erscheinungsbild führt, bei dem die QuickInfo übermäßig viel Abstand hinterlässt.

Dieses Verhalten ist eigentlich normal. Browser versuchen, den Text inline innerhalb des Felds zu fließen, bis die maximale Breite von 250 Pixel erreicht ist. Sobald diese Grenze erreicht ist, wird der verbleibende Text in die nächste Zeile umgebrochen. Allerdings wird die Breite der Box nach dem Textumbruch nicht wieder kleiner, da dies nicht zum beabsichtigten Verhalten des Textumbruchs gehört.

Folglich wird die Breite der Box mit 250 Pixel berechnet, da die CSS-Spezifikation vorschreibt, dass sie nicht größer sein darf dieser Wert. Es wird nicht so berechnet, dass es der Breite des Textes nach dem Umbruch entspricht und dann durch die maximale Breite überschrieben wird.

Leider ist keine Problemumgehung bekannt, um dieses Verhalten zu ändern.

Das obige ist der detaillierte Inhalt vonWie interagieren CSS „width' und „max-width' mit dem Textumbruch?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!