white-space和word-wrap和word-break所表示的换行和不换行的区别

 

1、前言

　　使得文本换行有不少方式，

1. <br/>标签元素，可以强制使得所在位置文本换行
2. <p>元素，<div>设定宽度，均可以对文本内容实现自适应换行
3. 对于长单词或者连接，默认不会断开换行，方式2就不可以在其这些文本内部进行换行了，
   这时就须要word-wrap : break-word ;或者word-break:break-all;实现强制断行

 

2、正文

1. 强制不换行

div{
    white-space:nowrap;
}
/*
white-space：normal 默认 
pre 换行和其余空白字符都将受到保护
nowrap 强制在同一行内显示全部文本，直到文本结束或者遭遇 br 对象
*/

2. 控制文本换行

div{
   word-break: normal;

　　word-break: break-all;

　　word-break: keep-all;

}
/*
word-break: 
normal ; 依照亚洲语言和非亚洲语言的文本规则，容许在字内换行
break-all : 　该行为与亚洲语言的normal相同。也容许非亚洲语言文本行的任意字内断开。该值适合包含一些非亚洲文本的亚洲文本
keep-all : 　与全部非亚洲语言的normal相同。对于中文，韩文，日文，不容许字断开。适合包含少许亚洲文本的非亚洲文本
*/

3. 强制单词内或连接内断行

div{

　　word-wrap: break-word;

}
/*
word-wrap 属性用来标明是否容许浏览器在长单词和连接内进行断句
normal: 只在容许的断字点换行(浏览器保持默认处理)
break-word:在长单词或URL地址内部进行换行
*/

 

 详细介绍：

（一）white-space 属性设置如何处理元素内的空白 

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

• normal默认。空白会被浏览器忽略。 
• pre 空白会被浏览器保留。其行为方式相似 HTML 中的 pre 标签。 
• nowrap文本不会换行，文本会在在同一行上继续，直到遇到 br 标签为止。 
• pre-wrap 保留空白符序列，可是正常地进行换行。 
• pre-line 合并空白符序列，可是保留换行符。 
• inherit 规定应该从父元素继承 white-space 属性的值。

 

（二）word-wrap 属性用来标明是否容许浏览器在单词内进行断句

　   word-wrap: normal|break-word; 

　　word-wrap 属性用来标明是否容许浏览器在单词内进行断句

• normal: 只在容许的断字点换行(浏览器保持默认处理) 
• break-word:在长单词或URL地址内部进行换行，

  /*内容将在边界内换行。若是须要，单词内部容许断行。*/

（三）word-break 属性用来标明怎么样进行单词内的断句

　　word-break: normal|break-all|keep-all;

• normal：使用浏览器默认的换行规则。 
• break-all:容许在单词内换行 ， 容许任意非CJK(Chinese/Japanese/Korean)文本间的单词断行。
• keep-all:只能在半角空格或连字符处换行，
  不容许CJK(Chinese/Japanese/Korean)文本中的单词换行，只能在半角空格或连字符处换行。非CJK文本的行为实际上和normal一致。
  

 

3、结语

https://www.cnblogs.com/yingzi1028/p/6113066.html

word-break: break-all;、word-break: keep-all; 、word-wrap: break-word;和white-space:nowrap;都有什么做用