css文字换行总结

大家好，欢迎来到IT知识分享网。

web前端布局中有时候在有限的空间中会出现很长的文字，由于对布局的要求有时候我们需要改变默认的换行方式，以自定义的方式控制换行，以下是使用css控制换行的相关总结

1、overflow-wrap，word-wrap 

这两个属性效果其实是一样的，word-wrap是早期微软定义的属性，overflow-wrap是css3标准化的定义，为了兼容们目前word-wrap已经被作为overflow-wrap的别名来使用，这两个属性有以下的 两个属性值

normal

表示在正常的单词结束处换行。

break-word

表示如果行内没有多余的地方容纳该单词到结尾，则那些正常的不能被分割的单词会被强制分割换行。

值得注意的是，使用break-word并不能强制断行中文文字，此属性仅能决定单词在结尾处需不需要换行切割

2、white-space

这个css属性是用来设置如何处理元素中的空白的，有以下几个值

normal

连续的空白符会被合并，换行符会被当作空白符来处理。填充line盒子时，必要的话会换行。

nowrap

和 normal 一样，连续的空白符会被合并。但文本内的换行无效。

pre

连续的空白符会被保留。在遇到换行符或者<br>元素时才会换行。 

pre-wrap

连续的空白符会被保留。在遇到换行符或者<br>元素，或者需要为了填充line盒子时才会换行。

pre-line

连续的空白符会被合并。在遇到换行符或者<br>元素，或者需要为了填充line盒子时会换行。

简单来说，就是控制单钱文本中的空白符，换行符是否合并，是否保留，nowrap时无视一切换行符

3、word-break

用于指定怎样在单词内断行，可以 执行强制断行，有以下几个属性

normal

使用默认的断行规则。

break-all

对于non-CJK (CJK 指中文/日文/韩文) 文本，可在任意字符间断行。

keep-all

CJK 文本不断行。 Non-CJK 文本表现同 normal。