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实现粒子旋转伸缩加载动画
Apr 22 HTML / CSS
纯HTML+CSS3制作导航菜单(附源码)
Apr 24 HTML / CSS
CSS改变网页中鼠标选中文字背景颜色例子
Apr 23 HTML / CSS
一款CSS3实现多功能下拉菜单(带分享按)的教程
Nov 05 HTML / CSS
一款纯css3实现的tab选项卡的实列教程
Dec 11 HTML / CSS
css3 矩阵的使用详解
Mar 20 HTML / CSS
详解CSS3实现响应式手风琴效果
Jun 10 HTML / CSS
HTML5无刷新改变当前url的代码
Mar 15 HTML / CSS
浅析图片上传及canvas压缩的流程
Jun 10 HTML / CSS
如何使用canvas绘制可移动网格的示例代码
Dec 14 HTML / CSS
CSS3点击按钮圆形进度打钩效果的实现代码
Mar 30 HTML / CSS
HTML5中 rem适配方案与 viewport 适配问题详解
Apr 27 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
用PHP连接Oracle for NT 远程数据库
2006/10/09 PHP
phpMyAdmin 安装及问题总结
2009/05/28 PHP
百度工程师讲PHP函数的实现原理及性能分析(二)
2015/05/13 PHP
PHP插件PHPMailer发送邮件功能
2017/02/28 PHP
PHP convert_cyr_string()函数讲解
2019/02/13 PHP
PHP 对象继承原理与简单用法示例
2020/04/21 PHP
插件:检测javascript的内存泄漏
2007/03/04 Javascript
Jquery.TreeView结合ASP.Net和数据库生成菜单导航条
2010/08/27 Javascript
深入理解JavaScript系列(8) S.O.L.I.D五大原则之里氏替换原则LSP
2012/01/15 Javascript
解析DHTML,JavaScript,DOM,BOM以及WEB标准的描述
2013/06/19 Javascript
jquery自定义滚动条插件示例分享
2014/02/21 Javascript
js中一维数组和二位数组中的几个问题示例说明
2014/07/17 Javascript
基于JavaScript实现随机颜色输入框
2016/12/10 Javascript
ReactNative Image组件使用详解
2017/08/07 Javascript
JS实现按钮颜色切换效果
2020/09/05 Javascript
基于jQuery的$.getScript方法去加载javaScript文档解析
2017/11/08 jQuery
node全局变量__dirname与__filename的区别
2019/01/14 Javascript
nodejs通过钉钉群机器人推送消息的实现代码
2019/05/05 NodeJs
layui点击弹框页面 表单请求的方法
2019/09/21 Javascript
React-redux实现小案例(todolist)的过程
2019/09/29 Javascript
[04:03]辉夜杯主赛事 12月25日RECAP精彩回顾
2015/12/26 DOTA
Python中的作用域规则详解
2015/01/30 Python
Python内置模块turtle绘图详解
2017/12/09 Python
python关于矩阵重复赋值覆盖问题的解决方法
2019/07/19 Python
python实现画出e指数函数的图像
2019/11/21 Python
css3遮罩层镂空效果的多种实现方法
2020/05/11 HTML / CSS
Omio美国:全欧洲低价大巴、火车和航班搜索和比价
2017/11/08 全球购物
工商管理应届生求职信
2013/10/07 职场文书
4s客服专员岗位职责
2013/12/01 职场文书
2014年医学生毕业自我鉴定
2014/03/26 职场文书
2014房屋登记授权委托书
2014/10/13 职场文书
小学生心理健康活动总结
2015/05/08 职场文书
婚礼双方父亲致辞
2015/07/27 职场文书
银行培训心得体会范文
2016/01/09 职场文书
劳务派遣管理制度(样本)
2019/08/23 职场文书
vue3种table表格选项个数的控制方法
2022/04/14 Vue.js