CSS3基础文本换行word-break和word-wrap属性的区别

文本换行word-break和word-wrap属性的区别

在CSS里可以通过word-wrap属性设置长单词或URL地址内部的换行,将其值设置为break-word即可,CSS里还可以通过word-break属性设置浏览器在指定的位置的换行……这里的break-wordword-break两个词汇,实在是让人一头雾水,很容易混淆,下面通过示例来看看它们到底有什么奥秘:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>测试页面</title>
<style type="text/css">
body {line-height:2.4;}
#my {width:330px;background:#fafafa;padding:10px;}
</style>
</head>
<body>
<div id="my">
<p>美国的英文全称是United States of America,澳大利亚的英文全称是The Commonwealth of Australia,微软官方商城的网址是https://www.microsoft.com,Wordpress的官方网站是https://wordpress.org……</p>
</div>
</body>
</html>

浏览这个页面,会发现默认情况下,当某个单词在一行内放不下的时候,便会自动将这个词换到下一行显示,比如本例中的Commonwealth这个词,也就是说默认情况下不会将一个词从中间断开。

CSS单词换行.png

关于word-break属性,可以自定义两个值,分别是:

word-break:break-all 表示允许在单词内换行

word-break:keep-all 表示只能在半角空格或连字符处换行

下面我给本例中的段落p标签设置一个允许在单词内换行的定义,看看有什么变化:

p {word-break:break-all;}

刷新网页后,发现此时即使某单词或URL在一行内的位置不够,也不会换到下一行,而是切断该词换行,这里英文单词break是打破和间断的意思。

CSS单词换行2.png

下面试试keep-all这个定义有什么效果:

p {word-break:keep-all;}

刷新网页后,发现此时也是即使某单词或URL在一行内的位置不够,也不会换到下一行,但只在空格或标点符号的位置换行,较长的单词冲出了元素框的宽度。

CSS单词换行3.png

刚刚说道在默认的情况下,如果一个词在行内的位置不够就自动换到下一行,那么假如这个词足够长或者元素框太窄的时候没设置强制换行时,浏览器默认怎么处理呢,下面测试一下:

#my {width:160px;background:#fafafa;padding:10px;}
p {word-break:normal;}

刷新网页后,发现浏览器虽然会自动将词换行,但是一行显示不下某词的时候,还是冲出了元素框的宽度:

CSS单词换行3.2.png

像这种“长单词”冲出元素框宽度的情况下,如果想避免该现象出现,就需要word-wrap属性出马了,该属性天生就是用来解决长单词换行问题的,它除了默认属性外只有一个属性,那就是:

p {word-wrap:break-word;}

我给上一个示例增加一个该属性看看效果:

CSS单词换行4.png

这里发现刚才单词冲出元素框的想象已经变的正常了。

同样是把单词从中间切断,word-wrap:break-wordword-break:break-all这两个定义都有强制断句的功能,两者的区别是:word-wrap:break-word会另起一个新行来放置长单词,如果新行还是放不下这个词,就再对长单词进行强制断句,而word-break:break-all则不管那么多,只要这行放不下,就强制断句了。在很多时候,word-wrap属性和word-break属性可以配合着使用……

站长Colin Gao,85后自由职业者,爱钻研,爱学习网页设计。建立本站的目的是整理学习笔记,分享学习经验,认识更多的朋友。感谢您阅读本站的文章,部分内容参考了网上的一些教程,但我会尽量根据自己的理解写更多原创的东西,本站网址如下,欢迎转载:
如果方便的话,转载请注明来自:http://www.cssaaa.com/css3/140.html