换行相关

white-space: nowrap;  //1） 强制不换行: 
word-wrap: break-word; //自动换行
word-break: break-all; //强制英文单词断行

text-overflow: ellipsis;
overflow: hidden; //超出部分显示省略号

1. white-space: normal | pre | nowrap | pre-wrap | pre-line

//html 
<div class="box">
  <p class="text">Test Text</p>
  <p class="text">A <br>   Very       Simple CSS       Background 
    Example  LALALA
    bixin BYGG</p>
</div>
//css
.text {
  text-align: right;
  white-space: /*带填充*/;
}

1. white-space: normal;
   合并连续的空格；换行符会被当做空格符处理；填充line盒子时，必要时会自动换行。

   
   
   normal.png

2. white-space: pre
   连续的空白符会被保留；遇到换行符或
   会会换行；不会默认换行；
   

   pre.png

3. white-space: nowrap;
   连续的空白符会被合并；遇到
   会换行，换行符会被当成空格处理；不会默认换行；
   

   nowrap.png

4）white-space: pre-wrap;
连续的空白会被保留； 遇到
或者换行符会换行； 填充line盒子时，必要时也会换行；

pre-wrap.png

5）white-space: pre-line;
连续的空白符会被合并； 遇到
或者换行符会换行； 填充line盒子时，必要时会换行；

pre-line.png

2. overflow-wrap: normal | break-word 定义是否允许单词中断换行

1. overflow-wrap: normal ; //正常的单词结尾处换行；

   
   
   overflowwrapNormal.png

2） overflow-wrap: break-word; //如果行内没有多余的地方容纳单词到结尾，则那些正常的不能被分割的单词会被强制分割换行；

overflowwrapBreakword.png

3 word-break: normal | break-all | keep-all 定义怎样在单词内断行

1. word-break: normal; 使用默认的断行规则

   
   
   word-breakNormal.png

2）word-break: break-all; 对于non-CJK (CJK 指中文/日文/韩文) 文本，可在任意字符间断行。

word-breakBreak-all.png

3）word-break: keep-all; CJK 文本不断行。 Non-CJK 文本表现同 normal。

word-breakKeep-all.png