使用CSS换行

Text Wrap with CSS

本文关键字：换行 CSS 使用      更新时间：2023-09-26

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

使用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文档：

换行CSS属性用于指定是否允许浏览器在单词中换行，以防止在其他不可破解的字符串太长而无法容纳时溢出。

关于您尝试的text-wrap：我在MDN中找不到它！，但在w3school:中发现了这一点

"文本换行属性在任何主要浏览器中都不受支持。"

在.rowdiv css中编写word-wrap:break-word。这样写：

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

检查这个http://jsfiddle.net/Rfc2j/1/

只需使用word-wrap: break-word

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

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

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

如果出于某种原因不需要任何空格，请在每个逗号后生成<wbr>标记。被标准编写者（HTML5除外）所推崇，但实际上得到了浏览器的普遍支持。然而，为了涵盖一些现代的奇怪之处（在IE和Opera中），请在样式表中添加以下内容：wbr:after { content: "'00200B"; }。

请注意，如果您使用word-wrap:break-word，它受到许多浏览器的支持，但不是所有浏览器都支持，浏览器也可以在数字之间和逗号之前打断，例如，在一行的末尾将"42"打断为"4"，在下一行的开头将"2"打断。

相关文章：