浏览器显示长文本的滚动条,尽管最大宽度

时间:2017-06-28 13:04:07

标签: html css

为什么此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;因为我的网站实际上使用相对定位来使用包含元素之外的渲染小部件。

如何包含该文字或至少阻止滚动条出现?将该文本呈现在其父文件之外是可以接受的。

2 个答案:

答案 0 :(得分:1)

使用word-wrap: break-word;因为文字之间没有空格,所以它不会在新行中断,而忽略max-width

&#13;
&#13;
<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>
&#13;
&#13;
&#13;

答案 1 :(得分:0)

&#13;
&#13;
Children.Remove
&#13;
&#13;
&#13;