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

转载

mob604756f89f2f 2019-12-24 14:55:00

文章标签 半角空白符 html 属性设置自适应 文章分类 C/C++ 后端开发

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

一、前言

　　使得文本换行有很多方式，

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

二、正文

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相同。对于中文，韩文，日文，不允许字断开。适合包含少量亚洲文本的非亚洲文本
*/

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

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

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

div{

word-wrap: break-word;

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

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

详细介绍：

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

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一致。