CSS3 文本换行

EasonTyler 发布于2019-08-30 13:16 / 2185人阅读

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

文本换行其实是个非常常用但并不起眼的特性。你什么都不用设，浏览器自动就会换行。例如英语，浏览器会根据容器尺寸，选择在半角空格或连字符处换行。例如中文，浏览器会选择在文字或标点符号处换行。但有时遇到长单词或URL浏览器就没这么智能了，会出现撑破容器的现象，很难看，如下图

容器定宽150px的前提下，普通文字如左图浏览器足以胜任自动换行，右图遇见长单词或URL，浏览器就力不从心了。当然，你能为容器设置overflow:auto;，让滚动条出现，以避免撑破容器。或干脆overflow:hidden;让超出部分隐藏，见下图

但总感觉overflow不太理想，应该有换行专用的属性。本篇就介绍一下3种换行的属性

word-wrap
word-break
white-space
word-wrap
word-wrap能实现断词换行。可设normal，break-word。默认值normal等于没设，不赘述。break-word允许断词换行。如右图设了word-wrap: break-word;后，浏览器的执行过程：发现长单词显示不下，根据默认的换行规则，用半角空格换行，因此Ooops too后面空出了一段空白，长单词移到第二行发现仍旧显示不下，于是断词换行，长单词和URL因此被中间截断。

word-break
word-break可以设置浏览器自动换行的方式。可设normal，break-all，keep-all。默认值normal等于没设，不赘述。break-all将浏览器的换行模式设为根据容器尺寸允许断词换行。和上面word-wrap: break-word;有什么区别呢？看下图，蓝线部分。

左图word-wrap的break-word是沿用浏览器默认的换行方式，因此“Ooops too”后面空出了一段空白，上面有解释，不赘述。右图word-break的break-all是改变浏览器默认的换行方式，让浏览器无视半角空格，直接根据容器尺寸换行，因此遇到长单词时，直接断词换行。效果上看word-break: break-all;比word-wrap: break-word;更节省页面空间。

keep-all不允许断词，在英语系情况下等同于normal，等同于没有设。在中日韩文情况下，normal和keep-all有区别，见下图

中日韩文情况下，normal仍旧等于没有设，浏览器选择在文字或标点符号处换行。但设成keep-all后，将不再允许断词（哪怕是中日韩文），只能像英语系一样根据半角空格或标点来换行。
white-space

white-space设置空白符和换行符。可设默认值normal，可设pre， nowrap，pre-line，pre-wrap。效果见下图

//xxx替换相应的值
Ooops too loooooooooooooooooooooong!

首先胜出四场的球队将获得NBA总冠军。

normal，浏览器默认会忽略多余空白符（要想显示多个空白符，请用代替空格键）和换行符。

pre会保留空白符和换行符，相当于

标签。要消除第一行这个换行符，常见在HTML端改成下面这样以便去掉多余空行

Ooops too loooooooooooooooooooooong!
首先胜出四场的球队将获得NBA总冠军。

//或者

 Ooops too loooooooooooooooooooooong!
首先胜出四场的球队将获得NBA总冠军。

nowrap和normal的区别是，它不会自动换行。当你用text-overflow属性时需要配合white-space: nowrap;和overflow: hidden;才能起作用

pre-line会忽略多余空白符（要想显示多个空白符，请用代替空格键），但保留换行符，会自动换行

pre-wrap和pre-line的区别是，它会保留多余空白符

总结

标签里展示源代码时，遇到有url属性时会很长，导致撑破页面（尤其是移动端），可以用white-space: pre-wrap;加上word-wrap: break-word;

标签外常见的强制换行方式是overflow:hidden;加上word-wrap: break-word;

强制不换行可以white-space: nowrap;加上word-break: keep-all;

更多技术请关注：http://www.quzhuanpan.com/q_f...

云服务器 GPU云服务器 AspNet文本换行 html显示文本换行 html文本框可换行 asp替换文本框换行

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

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

图解CSS3读书笔记文本与颜色

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

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

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

chinafgj 2019-08-01 16:05 评论0 收藏0
css3整理

W3C的CSS3规范仍在开发，但是，许多新的CSS3属性已在现代浏览器使用 CSS3边框 border-radius border-top-left-radius: 2em 0.5em box-shadow:x-shadow y-shadow blur spread(阴影尺寸，可选) color inset(outset外部阴影，可选) border-image border-im...

X1nFLY 2019-08-29 11:19 评论0 收藏0
CSS3学习笔记

摘要：在动画过程中，您能够多次改变这套样式。以百分比来规定改变发生的时间，或者通过关键词和，等价于和。为了获得最佳的浏览器支持，您应该始终定义和选择器。注释请使用动画属性来控制动画的外观，同时将动画与选择器绑定。CSS3 被划分为模块其中最重要的 CSS3 新增实用模块包括：背景和边框文本效果 2D/3D 转换动画多列布局用户界面 CSS3 边框: 　　用于创建圆角 border...

wenshi11019 2019-04-23 13:17 评论0 收藏0