css对文本折行样式控制汇总

相信前端攻城狮都被遇到过被文字样式恶心的场景，下面我来汇总一下，常用的文字css样式控制属性以及使用案例：

下面的案例就由这条测试数据展开，假设这条测试数据前默认是由空格的 

测试数据：https://wwww.youloveme.com/demo/demo/demo/demo/demo/demo

一、word-break

word-break：normal || break-all || keep-all
// normal: 保持游览器的默认换行规则
// break-all：单词内任意位置换行
// keep-all：只在空格处换行,没有空格的话表现跟normal一样

break-all：会在任意位置换行并且省略空格和文字之间的隔段

结果：

 keep-all：会保持文本原样，但如果有空格会换行

结果一：没有空格的文本

 结果二：在com后面加个空格

 是不是感觉很神奇，我也觉得的离谱

 二、word-wrap

word-wrap：normal || break-word
// normal: 保持游览器的默认换行规则
// break-word: 在单词之间或者标点符号处折行

 break-word：在单词之间或空格或标点符号之间折行

 

三、white-space 

white-space: normal || nowrap || pre || pre-wrap || pre-line || inherit

 pre：

所有的空格和换行符都被保留，所以在浏览器中显示的文本将与在 HTML 中输入的文本完全一致。 

<p style="white-space: pre;">
    This      is     some    
    preformatted
         text!
</p>

pre-wrap：它跟pre的区别在于它可以换行

文本中的空白符（如空格和换行符）将被保留。同时，如果需要单词内断行，则在单词中的位置进行断行。这个属性通常用于显示代码或其他预格式化文本，以便保留原始排版和排列方式。

<div class="pre-wrap-example">
        This ThisThisThisThisThisThisThisThisThisThis This<code>white-space: pre-wrap</code> ThisThisThisThis. 
        It This This white This and This This, but This wrap This This as This.
        
        This This This This This This This This words        and a line break.
        
        This is a This long This that This wrap to the This line if This, This on the This of the This.
</div>

结果：

 

四、 overflow-wrap

overflow-wrap: normal || anywhere || break-word

 anywhere： 这个属性跟break-all一样但火狐这些游览器不支持，所以不推荐用，这里就不作演示了。

 break-wrod：根据单词折行。

五、text-overflow

text-overflow：ellipsis || string || clip

 ellipsis：显示省略号，老生常谈了，不多说了。

string：实测没用.

clip：会将多余的文本裁掉。