我正在尝试使用css对任何类型的字符进行自动换行。
这是我正在使用css
.wordbreak {
white-space: -moz-pre-wrap !important; /* Mozilla, since 1999 */
white-space: -webkit-pre-wrap; /*Chrome & Safari */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: -o-pre-wrap; /* Opera 7 */
white-space: pre-wrap; /* css-3 */
word-wrap: break-word; /* Internet Explorer 5.5+ */
word-break: break-all;
white-space: normal;
}
不知何故，自动换行不适用于连续点(.(，请参阅此代码笔链接
在此示例中，您会看到许多点之间没有任何空格字符。它们不会在窗口边缘断裂，因此会导致水平滚动条。之后是一个单词，中间没有任何空格字符，并且按预期在窗口边缘中断。
为什么这些点不会在窗口边缘断裂？
我可以单独在 CSS 中解决这个问题吗？
有没有解决方法，也许在 JavaScript 中？
删除word-break: break-all;形成您的 CSS，它将按预期工作。你想违背诺言，你不能同时使用break-all和break word
解释
自动换行：中断词最近更改为溢出换行：中断词
将长单词换行到下一行。调整不同的单词，使其不执行 t 中间断裂。
分词：断字
无论是连续的单词还是多个单词，都会中断 它们在宽度限制的边缘。(即即使在 同一单词的字符(
因此，如果您有许多动态获取内容的固定大小跨度， 您可能更喜欢使用自动换行：break-word，因为只有这样 连续的单词在中间被打破，如果它是一个 句子包含许多单词，空格被调整以保持完整 单词(单词内没有中断(。
参考：查找此链接说明
.wordbreak {
white-space: -moz-pre-wrap !important; /* Mozilla, since 1999 */
white-space: -webkit-pre-wrap; /*Chrome & Safari */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: -o-pre-wrap; /* Opera 7 */
white-space: pre-wrap; /* css-3 */
/* word-break: break-all; */
word-wrap: break-word; /* Internet
Explorer 5.5+ */
white-space: normal;
}<div class="content" id='content1'>
<div class="wordbreak">.................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................</div>
<div class="wordbreak">////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////</div>
<div class="wordbreak">hellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohello</div>
</div>
<div class="wordbreak">Hello its very very very very very very very very very very very very very veryvery very very very very very veryvery very very very very very veryvery very very very very very veryvery very very very very very veryvery very very very very very veryvery very very very very very veryvery very very very very very veryvery very very very very very veryvery very very very very very veryvery very very very very very veryvery very very very very very veryvery very very very very very veryvery very very very very very veryvery very very very very very veryvery very very very very very veryvery very very very very very veryvery very very very very very veryvery very very very very very veryvery very very very very very veryvery very very very very very veryvery very very very very very veryvery very very very very very veryvery very very very very very veryvery very very very very very veryvery very very very very very veryvery very very very very very veryvery very very very very very very long text</div>