最大幅にもかかわらず長いテキストのスクロールバーを表示するブラウザ

Question

このHTMLによってスクロールバーが表示されるのはなぜですか？

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

私はそれは私が最大幅を指定していないはずだからだと思います。 はのラッピングだけでなく、のスクロールバーになると予想していたので、divの最終幅は200pxです。

私のウェブサイトでは、相対配置を使用して要素を含まないレンダリングウィジェットを実際に使用しているため、overflow: hidden;を使用することはできません。

どうすればそのテキストを含むことができますか、または少なくともスクロールバーが表示されないようにすることはできますか？そのテキストを親の外にレンダリングすることは許容されます。

Answer 1

使用word-wrap: break-word;それは新しい行に中断されません、それは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>