使用CSS使用连续点(.)自动换行

Question

我正在尝试使用

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;
}

不知何故，自动换行不适用于连续点（.），请参阅此codepen link

在此示例中，您会看到很多点，中间没有任何空白字符。它们不会在窗口边缘中断，从而导致水平滚动条。之后是一个很长的单词，中间没有任何空格字符，并且如预期的那样在窗口边缘中断。

为什么这些点不会在窗户边缘破裂？
我可以单独用 CSS 解决这个问题吗？
有没有解决方法，也许是在 JavaScript 中？

Answer 1

从 CSS 中删除

word-break: break-all;

它将按预期工作。您想要断词，但不能同时使用

break-all

和

break word

说明

word-wrap：break-word 最近更改为overflow-wrap：break-word

将把长单词换到下一行。调整不同的单词，使它们不 中间不要断。

断字：打破所有

不管是连续的单词还是很多单词，都会断掉 它们位于宽度限制的边缘。 （即即使在 同一单词的字符）

因此，如果您有许多动态获取内容的固定大小的跨度， 你可能更喜欢使用 word-wrap: 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>

Answer 2

替代最新答案：

line-break: anywhere;

如果你想让你的空间也换行，你也可以添加：

white-space: break-spaces;