Browser mit Bildlaufleiste für langen Text trotz maximaler Breite

Question

Warum bewirkt dieser HTML-Code, dass eine Bildlaufleiste angezeigt wird?

<div style="width: 200px; max-width: 200px; background-color: lightblue;"> 
 
verylongtext_verylongtext_verylongtext_verylongtext_verylongtext_verylongtext_verylongtext_verylongtext_verylongtext_verylongtext_verylongtext_verylongtext_ 
 
</div>

denke ich, es nicht sollte, weil ich eine maximale Breite angegeben haben. Ich erwartete dort keine Verpackung aber auch keine Bildlaufleiste, weil die endgültige Breite der div ist 200px.

Ich kann overflow: hidden; nicht verwenden, da meine Website tatsächlich Widgets außerhalb des enthaltenen Elements mit relativer Positionierung verwendet.

Wie kann ich diesen Text enthalten oder zumindest verhindern, dass die Bildlaufleiste angezeigt wird? Es ist akzeptabel, diesen Text außerhalb seines übergeordneten Elements zu rendern.

Answer 1

Verwendung word-wrap: break-word;, weil es keinen Raum zwischen Text ist, damit es nicht in neue Linie brechen und es wird max-width

<div style="width: 200px; max-width: 200px;word-wrap: break-word; background-color: lightblue;"> 
 
verylongtext_verylongtext_verylongtext_verylongtext_verylongtext_verylongtext_verylongtext_verylongtext_verylongtext_verylongtext_verylongtext_verylongtext_ 
 
</div>

Answer 2

<div style="width: 200px; max-width: 200px; background-color: lightblue;"> 
 
verylongtext_verylongtext_verylongtext_verylongtext_verylongtext_verylongtext_verylongtext_ verylongtext_verylongtext_verylongtext_verylongtext_verylongtext_ 
 
</div>