简单理解 word-wrap、word-break 和 white-space 的区别

spacewander 发布于2019-08-30 15:54 / 2638人阅读

摘要：文本不会换行，文本会在在同一行上继续，直到遇到标签为止。保留空白符序列，但是正常地进行换行。合并空白符序列，但是保留换行符。规定应该从父元素继承属性的值。参考文章你真的了解和的区别吗和区别

不设置word-warp和word-break的时候，一行单词，超过了容器的宽度是，会将最后一个单词下移一行进行显示，如果下移的那个单词长度还是超过了容器宽度，则会溢出

word-wrap

设置word-wrap: break-word时，先把长单词移动到下一行，然后如果还是超出容器宽度，则进行单词内的断句换行

后面的单词同上述规则

word-break

当上述情况，长单词移动到下一行的时候，第一行会有一定空余的空间，较为浪费资源。
于是通过设置word-break: break-all，长单词不移动到下一行，直接在当前行进行断句换行

white-space

作用于空格和回车，用于控制空格是否合并、回车是否可折行、句子太长是否在空格处折行

常用取值不同的作用：

normal: 默认。空白会被浏览器忽略。

pre: 空白会被浏览器保留。其行为方式类似 HTML 中的

标签。

nowrap: 文本不会换行，文本会在在同一行上继续，直到遇到
标签为止。

pre-wrap: 保留空白符序列，但是正常地进行换行。

pre-line: 合并空白符序列，但是保留换行符。

inherit: 规定应该从父元素继承 white-space 属性的值。

参考文章

你真的了解word-wrap和word-break的区别吗？

white-space、word-wrap和word-break区别

云服务器 GPU云服务器云计算和大数据的理解简单理解超融合架构宽带和专线的区别专线和宽带的区别

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/116879.html

white-space、word-wrap和word-break的简单整理

摘要：理解和的区别从易于区分和理解的角度，我引用了无双在你真的了解和的区别吗一文中对两个属性作用的解释属性用来标明是否允许浏览器在单词内进行断句，这是为了防止当一个字符串太长而找不到它的自然断句点时产生溢出现象。 white-space 、 word-wrap 和 word-break 是决定段落中的文本如何展示的3个css属性，属性说明请点击链接查看参考手册。 white-space wh...

Magicer 2019-08-30 15:52 评论0 收藏0
CSS 文本控制

摘要：学习一些文本控制的属性，防止做傻事。是的升级版，当单行文本过长，超过文本边界时自动换行。否则，文本仍然左对齐。 one more time one more chance. 一歩重头学前端, css入门。学习一些 CSS 文本控制的属性，防止做傻事。请大家对照下面列表检验下：会的、不会的、似懂非懂的。笔者是一个也不会。 white-space text-overflow: ell...

Taonce 2019-08-29 15:42 评论0 收藏0
图解CSS3读书笔记文本与颜色

摘要：将内容在边界内换行不截断英文单词换行语法浏览器只在半角空格或连字符的地方进行换行。个人感觉跟类似强行截断英文单词，达到词内换行效果。 CSS3文本 css字体类型属性 font-family, font-style(normal、italic、oblique[倾斜]), font-weight, font-size-adjust(定义是否强制对文本使用同一尺寸,仅火狐支持), font...

lvzishen 2019-08-28 18:26 评论0 收藏0
CSS基础篇--强制性换行word-break与word-wrap的使用

摘要：，例子与上面一样，但区别就是它会把整个单词看成一个整体，如果该行末端宽度不够显示整个单词，它会自动把整个单词放到下一行，而不会把单词截断掉的。代码结果如图所示这样就一目了然了。如果您觉得本文对您的学习有所帮助，请多支持与鼓励。一般情况下，元素拥有默认的white-space:normal（自动换行，不换行是white-space:nowrap）,当录入的文字超过定义的宽度后会自动换行...

happyfish 2019-08-28 18:15 评论0 收藏0
CSS3 文本换行

摘要：文本换行其实是个非常常用但并不起眼的特性。在中日韩文情况下，和有区别，见下图中日韩文情况下，仍旧等于没有设，浏览器选择在文字或标点符号处换行。但设成后，将不再允许断词哪怕是中日韩文，只能像英语系一样根据半角空格或标点来换行。文本换行其实是个非常常用但并不起眼的特性。你什么都不用设，浏览器自动就会换行。例如英语，浏览器会根据容器尺寸，选择在半角空格或连字符处换行。例如中文，浏览器会选择...

EasonTyler 2019-08-30 13:16 评论0 收藏0