white-space、word-wrap 和word break 属性用法

简介:

white-space属性

指定元素内的空白怎样处理


语法: white-space: normal | pre | nowrap | pre-wrap | pre-line

normal:默认处理方式

pre:用等宽字体显示预先格式化的文本,不合并文字间的空白距离,当文字超出边界时不换行

nowwap:强制在同一行内显示所有文本,合并文本间的多余空白,直到文本结束或者遭遇br对象

pre-wrap:用等宽字体显示预先格式化的文本,不合并文字间的空白距离,当文字超出边界时换行

pre-line:保持文本的换行,不保留文字间的空白距离,当文字碰到边界时发生换行


兼容性:

wKiom1gzstKSvDxbAAA_WNDCbYs212.png

示例:

HTML代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
< ul  class = "test" >
     < li  class = "normal" >
         < strong >normal:</ strong >
         < p >轻轻地我走了
             正如我轻轻地来</ p >
     </ li >
     < li  class = "pre" >
         < strong >pre:</ strong >
         < p >轻轻地我走了(这里接很多测试文字)
             正如我轻轻地来</ p >
     </ li >
     < li  class = "pre-wrap" >
         < strong >pre-wrap:</ strong >
         < p >轻轻地    我走了(这里接很多测试文字)
             正如我轻轻地来</ p >
     </ li >
     < li  class = "pre-line" >
         < strong >pre-line</ strong >
         < p >轻轻地    我走了(这里接很多测试文字)
             正如我轻轻地来</ p >
     </ li >
     < li  class = "nowrap" >
         < strong >nowrap:</ strong >
         < p >轻轻地我走了
             正如我轻轻地来</ p >
     </ li >
</ ul >


CSS代码:

1
2
3
4
5
6
.test p{ width : 200px ; border : 1px  solid  #000 ;}
. normal  p{word-wrap: normal ;}
. pre  p{ white-space : pre ;}
.pre-wrap p{ white-space :pre-wrap;}
.pre-line p{ white-space :pre-line;}
. nowrap  p{ white-space : nowrap ;}


页面效果截图:

wKioL1gzs4eRfGt0AAAkdXBpztE288.png


word-wrap属性

设置或检索当内容超过指定容器的边界时,是否换行


语法:word-wrap: normal | break-word

normal:允许内容顶开或溢出指定的容器边界

break-word:内容将在边界内换行,如果需要,单次内部允许断行


兼容性:

wKioL1gztUfBBAQ2AAAljxgeseY638.png


示例:

HTML代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
< ul  class = "test" >
     < li  class = "normal" >
         < strong >normal:</ strong >
         < p >aaabbbcccdddeeefffggghhhiiijjjkkklllmmmnnn</ p >
     </ li >
     < li  class = "break-word" >
         < strong >break-word:</ strong >
         < p >aaabbbcccdddeeefffggghhhiiijjjkkklllmmmnnn</ p >
     </ li >
     < li  class = "break-word" >
         < strong >break-word:</ strong >
         < p >中英混排的时候abcdefghijklmnopqrst</ p >
     </ li >
</ ul >


CSS代码:

1
2
3
.test p{ width : 100px ; border : 1px  solid  #000 ; background-color : #eee ;}
. normal  p{word-wrap: normal ;}
.break-word p{word-wrap:break-word;}


页面效果截图:

wKiom1gztk_D7hN9AAASqSa2z24088.png


word-break属性

设置或检索对象内文本的字内换行行为


使用场景:对于解决防止页面中出现连续无意义的长字符打破布局,应该使用break-all属性值


语法:word-break: normal | keep-all | break-all

normal:依照亚洲语言和非亚洲语言的文本规则,允许在字内换行

keep-all:与所有非亚洲语言的normal相同。对于中文,韩文,日文,不允许字断开。适合包含少量亚                   洲文本的非亚洲文本

break-all:该行为与亚洲语言的normal相同。也允许非亚洲语言文本行的任意字内断开。该值适合包含                   一些非亚洲文本的亚洲文本,比如使连续的英文字母间断行


兼容性:

wKiom1gzt9fSJ0QWAAA8dXiDncE628.png

示例:

HTML代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
< ul  class = "test" >
     < li  class = "normal" >
         < strong >normal:</ strong >
         < p >aaabbbcccdddeeefffggghhhiiijjjkkklllmmmnnn</ p >
     </ li >
     < li  class = "break-all" >
         < strong >break-word:</ strong >
         < p >aaabbbcccdddeeefffggghhhiiijjjkkklllmmmnnn</ p >
     </ li >
     < li  class = "keep-all" >
         < strong >keep-all:</ strong >
         < p >aaabbbcccdddeeefffggghhhiiijjjkkklllmmmnnn</ p >
     </ li >
</ ul >


CSS代码:

1
2
3
4
.test p{ width : 100px ; border : 1px  solid  #000 ; background-color : #eee ;}
. normal  p{word-break: normal ;}
.break- all  p{word-break:break- all ;}
.keep- all  p{word-break:keep- all ;}


页面效果截图:

wKioL1gzuH7jFQgfAAAP2LKg8JE421.png

本文转自   frwupeng517   51CTO博客,原文链接:http://blog.51cto.com/dapengtalk/1875341

相关文章
word --- 如何设置word里的代码格式,使之有底纹的效果
word --- 如何设置word里的代码格式,使之有底纹的效果
148 0
|
11月前
|
前端开发 容器
word-break:break-all和word-wrap:break-word的区别
word-break:break-all和word-wrap:break-word的区别
42 0
|
定位技术
Print on both sides 里,flip pages on long edge 和 flip pages on short page 的区别
Print on both sides 里,flip pages on long edge 和 flip pages on short page 的区别
|
存储 自然语言处理 索引
match_phrase 跨值查询中 position_increment_gap 参数用法
match_phrase 跨值查询中 position_increment_gap 参数用法
|
容器
word-break:break-all和word-wrap:break-word知多少
word-break:break-all和word-wrap:break-word知多少
164 0
|
容器
【已解决】text-overflow: ellipsis; 不生效(除了white-space:nowrap;overflow: hidden;之外)
text-overflow: ellipsis; 不生效(除了white-space:nowrap;overflow: hidden;之外)
1045 0
用white-space:nowrap;解决中文标签换行问题
在web2.0的概念中,标签是个时常出现的东西,可是在设计时中文不象英文那样在表现标签云时表现的那么好,主要是中文词组的成为标签后,有时会出现长标签在标签云中被断行的问题。这个主要是用display:inline-block;这个属性~,具体代码如下:
355 0
justify-content: space-between能够对齐的解决办法
justify-content: space-between能够对齐的解决办法