如何在HTML中自动换行文字？

如何可以超过一个div （比如说200px ）宽度的文本像aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa被包装？

我可以接受任何types的解决scheme，如CSS，jQuery等

Answer 1

尝试这个：

 div { width: 200px; word-wrap: break-word; } 

Answer 2

你可以像这样使用一个软连字符：

aaaaaaaaaaaaaaa­aaaaaaaaaaaaaaa

这将显示为

 aaaaaaaaaaaaaaa- aaaaaaaaaaaaaaa 

如果包含的框不够大或者像

 aaaaaaaaaaaaaaaaaaaaaaaaaaaaaa 

如果是。

Answer 3

在引导程序3上，确保空格未被设置为“nowrap”。

 div { width: 200px; word-break: break-all; white-space: normal; } 

Answer 4

  div { // set a width word-wrap: break-word } 

“ word-wrap ”解决scheme仅适用于支持CSS3 IE和浏览器。

最好的跨浏览器解决scheme是使用你的服务器端语言（PHP或其他）来定位长string，并定期放置在它们的HTML实体​ 这个实体很好地打破了长词，并且适用于所有的浏览器。

例如

 aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa​aaaaaaaaaaaaaaaaaaaaaaaaaaaaa 

Answer 5

如果单词中没有空格（例如长URL），则唯一能够跨越IE，Firefox，Chrome，Safari和Opera的作品是：

 div{ width: 200px; word-break: break-all; } 

我发现这是防弹的。

Answer 6

另一种select是使用：

 div { white-space: pre-line; } 

这将在所有支持CSS1的浏览器中设置所有div元素（这几乎是所有常见的浏览器，早在IE 8中）

Answer 7

这对我有效

 word-wrap: normal; word-break: break-all; white-space: normal; display: block; height: auto; margin: 3px auto; line-height: 1.4; -webkit-line-clamp: 1; -webkit-box-orient: vertical; 

Answer 8

将此CSS添加到段落。

 style="width:420px; min-height:15px; height:auto!important; color:#666; padding: 1%; font-size: 14px; font-weight: normal; word-wrap: break-word; text-align: left" 

Answer 9

跨浏览器

 .wrap { white-space: pre-wrap; /* css-3 */ white-space: -moz-pre-wrap; /* Mozilla, since 1999 */ white-space: -pre-wrap; /* Opera 4-6 */ white-space: -o-pre-wrap; /* Opera 7 */ word-wrap: break-word; /* Internet Explorer 5.5+ */ } 

Answer 10

尝试这个

 div{ display: block; display: -webkit-box; height: 20px; margin: 3px auto; font-size: 14px; line-height: 1.4; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; } 

Answer 11

从CSS技巧的例子：

 div { -ms-word-break: break-all; /* Be VERY careful with this, breaks normal words wh_erever */ word-break: break-all; /* Non standard for webkit */ word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; } 

更多例子在这里 。

Answer 12

在HTML正文中尝试：

 <table> <tr> <td> <div style="word-wrap: break-word; width: 800px"> Hello world, how are you? More text here to see if it wraps after a long while of writing and it does on Firefox but I have not tested it on Chrome yet. It also works wonders if you have a medium to long paragraph. Just avoid writing in the CSS file that the words have to break-all, that's a small tip. </div> </td> </tr> </table> 

在CSS体内试试：

 background-size: auto; table-layout: fixed; 

Answer 13

服务器端解决scheme适用于我： $message = wordwrap($message, 50, "<br>", true); 其中$message是一个stringvariables，包含要分解的字/字符。 50是任何给定分段的最大长度， "<br>"是你想要插入每个（50）个字符的文本。

Answer 14

使用word-wrap:break-word属性以及所需的宽度。 主要是以像素为单位，而不是百分比。

 width: 200px; word-wrap: break-word;