CSS中几个与换行有关的属性简明总结


Posted in HTML / CSS onApril 15, 2014

word-wrap

normal 默认值。允许内容顶开指定的容器边界。
break-word 内容将在边界内换行。如果需要,词内换行也将发生。
白话解释:也就是说如果一个很长的英文单词如果超过了容器长度,是否折断英文单词,默认是不折断。
支持情况:IE、Firefox 3.6、Chrome 4 中测试通过。

word-break

normal 默认值。依照亚洲语言和非亚洲语言的文本规则,允许在字内换行。
break-all 该行为与亚洲语言的 normal 相同。也允许非亚洲语言文本行的任意字内断开。该值适合包含一些非亚洲文本的亚洲文本。
keep-all 与所有非亚洲语言的 normal 相同。对于中文,韩文,日文,不允许字断开。适合包含少量亚洲文本的非亚洲文本。
白话解释:break-all 把英文单词拆成一个一个的就像亚洲文字一样可单独拆开;keep-all 把一长串亚洲文字当作是一个英文单词一样对待。
支持情况:IE 支持全部;Firefox 3.6 不支持全部;Chrome 4 不支持 keep-all。

white-space

normal 默认值。默认处理方式。文本自动处理换行。假如抵达容器边界内容会转到下一行
pre 换行和其他空白字符都将受到保护。这个值需要 IE6+ 或者 !DOCTYPE 声明为 standards-compliant mode 支持。如果 !DOCTYPE 声明没有指定为 standards-compliant mode ,此属性可以使用,但是不会发生作用。结果等同于 normal 。
nowrap 强制在同一行内显示所有文本,直到文本结束或者遭遇 br 对象。
白话解释:pre 源代码中有几个空格,显示就有几个空格;源代码中有回车换行,显示也有换行。Nowrap 不见 br 不换行,即使是中文汉字超过了容器大小。
支持情况:IE、Firefox 3.6、Chrome 4 中测试通过,不过 pre 在 IE 中的支持情况还是请参照上面的说明。

line-break

normal 默认值。应用日文文本的默认换行规则。
strict 强制日文文本换行规则的严谨性。
应用
强制换行,遇到长英文单词,直接将词折断。

word-wrap:break-word;

也有人用 break-word:break-all,但考虑到兼容性,还是建议用 word-wrap:break-word;。
除非遇到 br,否则不管怎样都不换行。
white-space:nowrap;

附:word-wrap:break-word 与 word-break:break-all 区别

word-wrap:break-word 是优先断单词(根据空格判断单词),而 word-break:break-all 完全没有把文字当单词看待,在它眼里,都是一块一块的字符。
这就会造成这么两情况:
假如一个 p 有 100px 宽,而其中有很长一段无空格的英文字符,完全超过 100px 了,此时二者表现相同,都是在边界处将字符截断。
假如一个 p 有 100px 宽,其中有段文字既有中文也有英文,前面是中文,占了 70px,后面一个很长的英文单词有 50px。对于 word-wrap:break-word 会将该单词全部折到下一行输出,而 word-break:break-all 会利用剩下的 30px 输出单词的前半部分,再到下一行输出剩下的 20px。
支持情况:
word-wrap:break-word 受众多浏览器支持;
word-break:break-all 受较少浏览器支持。

HTML / CSS 相关文章推荐
基于css3仿造window7的开始菜单
Jun 17 HTML / CSS
CSS3等相关属性制作分页导航实现代码
Dec 24 HTML / CSS
CSS3实现大小不一的粒子旋转加载动画
Apr 21 HTML / CSS
利用CSS3的border-radius绘制太极及爱心图案示例
May 17 HTML / CSS
CSS3实现伪类hover离开时平滑过渡效果示例
Aug 10 HTML / CSS
HTML5注册页面示例代码
Mar 27 HTML / CSS
详解HTML5中的picture元素响应式处理图片
Jan 03 HTML / CSS
做一个能自适应高度的textarea的示例代码
Sep 06 HTML / CSS
详解Html5项目适配系统深色模式方案总结
Apr 14 HTML / CSS
用position:sticky完美解决小程序吸顶问题的实现方法
Apr 24 HTML / CSS
CSS 实现多彩、智能的阴影效果
May 12 HTML / CSS
css3 选择器
May 11 HTML / CSS
css3 条纹化和透明化表格Firefox下测试成功
Apr 15 #HTML / CSS
css3新增颜色表示方式分享
Apr 15 #HTML / CSS
常用的四种CSS透明属性介绍
Apr 12 #HTML / CSS
可以随进度显示不同颜色的css3进度条分享
Apr 11 #HTML / CSS
css3发光搜索表单分享
Apr 11 #HTML / CSS
用css3实现当鼠标移进去时当前亮其他变灰效果
Apr 08 #HTML / CSS
css3的图形3d翻转效果应用示例
Apr 08 #HTML / CSS
You might like
CI框架(CodeIgniter)操作redis的方法详解
2018/01/25 PHP
Laravel框架学习笔记之批量更新数据功能
2019/05/30 PHP
PHP中将一个字符串部分字符用星号*替代隐藏的实现代码
2019/09/08 PHP
js的闭包的一个示例说明
2008/11/18 Javascript
jq选项卡鼠标延迟的插件实例
2013/05/13 Javascript
jquery阻止冒泡事件使用模拟事件
2013/09/06 Javascript
javascript分页代码实例分享(js分页)
2013/12/13 Javascript
Nodejs使用mysql模块之获得更新和删除影响的行数的方法
2014/03/18 NodeJs
jQuery实现鼠标经过提示信息的地图热点效果
2015/04/26 Javascript
ajax在兼容模式下失效的快速解决方法
2016/03/22 Javascript
基于javascript实现九九乘法表
2016/03/27 Javascript
javascript实现任务栏消息提示的简单实例
2016/05/31 Javascript
AngularJS  自定义指令详解及实例代码
2016/09/14 Javascript
过期软件破解办法实例详解
2017/01/04 Javascript
nodejs使用express创建一个简单web应用
2017/03/31 NodeJs
nodejs接入阿里大鱼短信验证码的方法
2017/07/10 NodeJs
JavaScript实现的斑马线表格效果【隔行变色】
2017/09/18 Javascript
详解angularjs 学习之 scope作用域
2018/01/15 Javascript
vue实现验证码按钮倒计时功能
2018/04/10 Javascript
webpack手动配置React开发环境的步骤
2018/07/02 Javascript
JavaScript类的继承方法小结【组合继承分析】
2018/07/11 Javascript
node.js express框架实现文件上传与下载功能实例详解
2019/10/15 Javascript
[17:36]VG战队纪录片
2014/08/21 DOTA
Python Flask-web表单使用详解
2017/11/18 Python
Python 实现删除某路径下文件及文件夹的实例讲解
2018/04/24 Python
python寻找list中最大值、最小值并返回其所在位置的方法
2018/06/27 Python
python绘制中国大陆人口热力图
2018/11/07 Python
pyqt远程批量执行Linux命令程序的方法
2019/02/14 Python
Django使用消息提示简单的弹出个对话框实例
2019/11/15 Python
Pytorch之Variable的用法
2019/12/31 Python
python中线程和进程有何区别
2020/06/17 Python
html5定制表单_动力节点Java学院整理
2017/07/11 HTML / CSS
英国最好的温室之家:Greenhouses Direct
2019/07/13 全球购物
ThinkPHP5和ThinkPHP6的区别
2021/03/31 PHP
python实现自动清理文件夹旧文件
2021/05/10 Python
Redis高级数据类型Hyperloglog、Bitmap的使用
2021/05/24 Redis