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

自动换行不适用于连续点 (.)，请参阅此代码笔 link

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

为什么点在 window 的边缘没有断开？
我可以单独 CSS 解决这个问题吗？
是否有解决方法，也许在 JavaScript 中？

Answer 1

从您的 CSS 中删除 word-break: break-all; 它将按预期工作。你想打断字，你不能同时使用 break-all 和 break word

说明

word-wrap: break-word recently changed to overflow-wrap: break-word

will wrap long words onto the next line.adjusts different words so that they do no t break in the middle.

word-break: break-all

irrespective of whether it’s a continuous word or many words, breaks them up at the edge of the width limit. (i.e. even within the characters of the same word)

So if you have many fixed-size spans which get content dynamically, you might just prefer using word-wrap: break-word, as that way only the continuous words are broken in between, and in case it’s a sentence comprising many words, the spaces are adjusted to get intact words (no break within a word).

参考：Find this link description

.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>

使用 css 以连续点 (.) 换行

Word wrap with continuous dot(.) using css

css

word-wrap

说明