CSS中的文本换行

Question

我是一名有用的助手，可以为您翻译文本。以下是需要翻译的内容：

我有一个由随机数字生成的更长的字符串。我将其显示在一个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'。但它并不起作用。实际上，这个属性在所有浏览器中都无效。

- Umesh Patil

---

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

嗯，你可以在逗号后面使用空格。这是否与你的目标相冲突？ - Wesley Murch

Answer 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>​

演示

MDN文档：

word-wrap CSS属性用于指定浏览器是否允许在单词内换行，以防止当一个不可分割的字符串过长而无法适应时发生溢出。

关于你尝试过的 text-wrap：我在 MDN 中找不到它！但是在 w3school 找到了这个：

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

- gdoron is supporting Monica

---

请避免参考w3schools，它不是一个可靠的资源。http://w3fools.com/ - Emyr

@Emyr。在其他任何地方都没找到（正如我在回答中所写的...），别烦人。 - gdoron

什么关于权威来源：http://www.w3.org/TR/css3-text/#text-wrap？还要记住，CSS Text Level 3仍然是一份工作草案，因此可能会进行更改，作者不应依赖任何行为或实现支持。 - Joey

Answer 2

在 .row DIV css 中写入 word-wrap:break-word。写法如下：

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

Check this http://jsfiddle.net/Rfc2j/1/

- sandeep

Answer 3

只需使用word-wrap: break-word

示例代码： http://jsfiddle.net/Rfc2j/

- Fabrizio Calderan

Answer 4

使用word-wrap:break-word;属性代替text-wrap:normal

- Gaurav Agrawal

---

兄弟，尽量避免拼写错误——brek-word 应该是 break-word。 - w3uiguru

Answer 5

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

如果由于某种原因您不想要任何空格，请在每个逗号后面生成<wbr>标记。虽然被标准编写者所反对（除了HTML5），但几乎所有浏览器都支持。但是，为了覆盖一些现代怪异行为（在IE和Opera中），请将以下内容添加到您的样式表中：wbr:after { content: "\00200B"; }。

请注意，如果您使用word-wrap:break-word，这在许多浏览器中得到支持但并非全部，浏览器也会自由地在数字和逗号之间断开，例如在一行的末尾将“42”分成“4”，并在下一行的开头将“2”分开。

- Jukka K. Korpela