CSS 换行答案 - 爱码网

【问题标题】：CSS line wrappingCSS 换行
【发布时间】：2010-04-29 14:58:39
【问题描述】：

给定一个块容器

<div>
 this is a very long string which contains a bunch of characters that I want to break at container edges.
</div>

我是否可以设置任何 css 属性来强制它在达到容器宽度时中断，而不管字符串的内容如何，例如像这样的中断：

this is a ve
ry long stri
ng which ...

几乎是我想要的。现在，它似乎总是更喜欢在空白字符或其他特殊字符（例如 /）处换行。

【问题讨论】：

你可以在doctype.com/questions 上问同样的问题:)
StackOverflow 对于这类问题仍然足够。
@Magnus：无意冒犯，但我还没有发现 doctype 是解决技术问题的一个很好的答案来源。
@Robusto：没有采取任何措施。我以为我给出了很好的建议。很高兴能解决这个问题:)

标签： css

【解决方案1】：

有一个名为 word-break 的 CSS3 属性，将来可能会对您有所帮助。

更多信息请点击此处：http://www.css3.com/css-word-break/

break-all 值看起来可以满足您的要求：

在内容包含大部分亚洲字符集内容的情况下很有用，该值的行为类似于“正常”。非亚洲字符集的内容可能会被任意断行。

至于更多受支持的 CSS 版本，我不相信有办法做到这一点。

【讨论】：

谢谢 CSS3 属性 "word-break: break-all;"在 Webkit 中工作，但遗憾的是它在 Firefox 中不起作用（或隐藏在其他地方）。一个浏览器完成了，还有几个:)。
已接受，因为您已为一些浏览器解决了该问题。似乎还不能用 Firefox 的 CSS 解决 :(
这适用于大多数浏览器。见caniuse.com/#search=word-break

【解决方案2】：

试试这个

<style type="text/css">
div {
white-space: -moz-pre-wrap; /* Mozilla, supported since 1999 */
white-space: -pre-wrap; /* Opera 4 - 6 */
white-space: -o-pre-wrap; /* Opera 7 */
white-space: pre-wrap; /* CSS3 - Text module (Candidate Recommendation) http://www.w3.org/TR/css3-text/#white-space */
word-wrap: break-word; /* IE 5.5+ */
}
</style>

<div style="width:200px">
adsjflk;asjfl;kasdjfl;kasdjfl;kasdjf;lkasdjf;lkasdjf;lkasjdf;lkajsd;lkadfjs;l
</div>

【讨论】：

几乎，遗憾的是，如果可以的话，它仍然更喜欢在连字符和空格上打断（Webkit）。在 Firefox 中，除了 / :(。

【解决方案3】：

通过将 div 包含在父 div 中并设置父 div 的宽度来实现相同的替代方法。虽然它可能不是理想的解决方案。

<div style="width:50px">
        <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</div>
        </div>

【讨论】：

遗憾的是，如果以下单词不适合当前行：/.