如何使文本出现在下一行而不是溢出？ [复制]答案

【问题标题】：How can I make text appear on next line instead of overflowing? [duplicate]如何使文本出现在下一行而不是溢出？ [复制]
【发布时间】：2011-04-04 23:34:57
【问题描述】：

我的页面上有一个固定宽度的 div，其中包含文本。当我输入一长串字母时，它会溢出。我不想隐藏溢出我想在新行上显示溢出，见下文：

<div id="textbox" style="width:400px; height:200px;">
dfssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssfddddddddddddddddddddddsdffffffffffffffffsdffffffffffffffffdfssssssssssssdf
</div>

有没有办法禁用溢出并将溢出的文本换行？？？ Twitter 做了类似的事情，但我无法用 CSS 弄清楚，他们可能正在使用 Javascript。

有人可以帮忙吗？

【问题讨论】：

标签： css text overflow

【解决方案1】：

只需添加

white-space: initial;

到文本，下一行会自动出现一行文本。

【讨论】：

谢谢！我花了很多时间试图解决这个问题。
完美运行..谢谢！
很有魅力。谢谢！
适用于大多数浏览器，但要使其在 IE11 中运行，我必须使用 white-space: normal;
white-space: initial; 不适用于我的 IE 11。相反，我使用了white-space: normal;，它在所有浏览器中都运行良好。

【解决方案2】：

word-wrap: break-word

但它是 CSS3 - http://www.css3.com/css-word-wrap/。

【讨论】：

虽然它是 CSS3，但 IIRC 可以在大多数主要浏览器中使用。 +1
仅供参考：您可以将 'normal' 或 'break-word' 值与 word-wrap 属性一起使用。正常意味着文本将扩展框的边界。 Break-word 表示文本将换行到下一行。
word-break: break-word; 为我工作。
知道为什么这不起作用但white-space: initial; 起作用吗？
word-wrap 是一个未知属性。你的意思是word-break？

【解决方案3】：

尝试the <wbr> tag - 不像其他人建议的word-wrap 属性那样优雅，但在所有主要浏览器（阅读 IE）都实现 CSS3 之前，它是一个可行的解决方案。

【讨论】：

【解决方案4】：

好吧，您可以在不间断的长字符串中添加一个或多个“软连字符”(&#173;)。我怀疑旧的 IE 版本是否正确地处理了这个问题，但它应该做的是告诉浏览器允许的分词，如果必须的话，它可以使用。

现在，您将如何选择在哪里填充这些角色？这取决于实际的字符串及其含义，我猜。

【讨论】：

你可以同时使用 min-width 和 width 来修复这个宽度： min-content;最小宽度：100%；