使用 CSS 换行答案

【问题标题】：Text Wrap with CSS使用 CSS 换行
【发布时间】：2012-03-13 09:54:52
【问题描述】：

我随机生成了一串更长的数字。我在一个 div 块中显示它。因为它是更长的单弦。它被写在一行中。

例如：

String str="13,7,5,1,10,7,18,11,17,10,9,16,17,9,6,19,6,13,2,18,6,9,8,5,15,4,17,16,12,8,19,16,5,9,6,16,16,5,16,12,0,14,7,11,12,11,12,16,8,3,16,3,1,10,4,14,5,9,4,3,8,3,0,19,5,7,8,7,13,14,4,3,12,6,5,19,17,3,3,19,0,4,14,8,15,17,14,5,9,3,9,19,18,8,10,0,6,1,18,16,3,16,10,9,15,10,4,7,1,7,11,6,11,16,4,11,10,1,0,15,16,19,6,15,18,14,16,16,5,17,9,19,12,7,14,14,11,19,18,10,9,5,11,2,9,0,3,15,14,1,7,14,12,17,1,10,14,5,17,16,19,10,12,6,19,16,5,19,10,9,18,14,11,9,1,18,0,10,0,19,7,17,2,4,14,2,1,3,9,17,11,7,12,4,7,5,17,2,1,6,19,14,5,3,2,6";

<div id='row' style='width:100px;height:500px;'>

</div>

我已将固定宽度设置为 div 块。我想在多行中显示这个较长的字符串，而不是在一行中显示。

我尝试了 css 'text-wrap:normal'。它不起作用。实际上，此属性并非在所有浏览器中都有效。

【问题讨论】：

“任何主流浏览器都不支持text-wrap 属性。”
嗯，您可以在逗号后使用空格。这是否与您的目标相冲突？

标签： javascript css word-wrap

【解决方案1】：

使用word-wrap:break-word; css 样式：

<div id='row' style='word-wrap:break-word;'>
13,7,5,1,10,7,18,11,17,10,9,16,17,9,6,19,6,13,2,18,6,9,8,5,15,4,17,16,12,8,19,16,5,9,6,16,16,5,16,12,0,14,7,11,12,11,12,16,8,3,16,3,1,10,4,14,5,9,4,3,8,3,0,19,5,7,8,7,13,14,4,3,12,6,5,19,17,3,3,19,0,4,14,8,15,17,14,5,9,3,9,19,18,8,10,0,6,1,18,16,3,16,10,9,15,10,4,7,1,7,11,6,11,16,4,11,10,1,0,15,16,19,6,15,18,14,16,16,5,17,9,19,12,7,14,14,11,19,18,10,9,5,11,2,9,0,3,15,14,1,7,14,12,17,1,10,14,5,17,16,19,10,12,6,19,16,5,19,10,9,18,14,11,9,1,18,0,10,0,19,7,17,2,4,14,2,1,3,9,17,11,7,12,4,7,5,17,2,1,6,19,14,5,3,2,6
</div>

LIVE Demo

MDN docs:

word-wrap CSS 属性用于指定是否允许浏览器在单词中换行，以防止在原本不可断开的字符串太长而无法容纳时溢出。

关于您尝试的text-wrap：我在MDN! 中找不到它，但在w3school 中找到了它：

“任何主流浏览器都不支持 text-wrap 属性。”

【讨论】：

请避免提及 w3schools，它不是可靠的资源w3fools.com
@Emyr。没有在其他地方找到它（正如我在答案中写的......），不要滋扰。
权威来源：w3.org/TR/css3-text/#text-wrap？另外请记住，CSS Text Level 3 仍然是一个工作草案，因此可以并且将会进行更改，并且作者不应依赖任何行为或实现支持。

【解决方案2】：

在.row DIV css 中写入word-wrap:break-word。像这样写：

#row{
  word-wrap:break-word;
}

查看http://jsfiddle.net/Rfc2j/1/

【讨论】：

【解决方案3】：

只需使用word-wrap: break-word

小提琴示例：http://jsfiddle.net/Rfc2j/

【讨论】：

【解决方案4】：

使用word-wrap:break-word; 属性而不是text-wrap:normal

【讨论】：

老兄试图从这里的拼写错误中解脱出来 - brek-word 应该是 break-word。

【解决方案5】：

在每个逗号后生成一个空格。这种表示在人类语言中是正常的，它也提高了数字序列的可读性（尽管我想知道它是为了什么而生成的——为什么需要它？）。您可以通过将word-spacing 设置为负值来调整间距量。

如果您出于某种原因不需要任何空格，请在每个逗号后生成<wbr> 标记。标准编写者（HTML5 除外）不满意，但浏览器几乎普遍支持。但是，为了涵盖一些现代的怪异（在 IE 和 Opera 中），请将以下内容添加到您的样式表中：wbr:after { content: "\00200B"; }。

请注意，如果您使用word-wrap:break-word，许多浏览器（但不是全部）都支持它，浏览器也可以随意在数字之间和逗号之前换行，例如在一行的末尾将“42”拆分为“4”，在下一行的开头将“2”拆分为“2”。

【讨论】：