前面的话

  CSS3新增了两个换行属性word-wrap和word-break。把空白符和换行放在一起说,是因为实际上空白符是包括换行的,且常用的文本不换行是使用的空白符的属性white-space: nowrap;到底它们还有些什么属性值,以及有什么对应的用法呢?本文就空白符和换行的内容做详细介绍和梳理

空白符

定义

  空白符是指空格、制表符和回车;HTML默认已经把所有空白符合并成一个空格

white-space

  值: normal | nowrap | pre | pre-wrap | pre-line | inherit

  初始值: normal

  应用于: 所有元素

  继承性: 有

normal: 合并空白符,允许自动换行
nowrap: 合并空白符,不允许自动换行
pre-line: 合并空白符(不包括换行符),允许自动换行
pre: 不合并空白符,不允许自动换行
pre-wrap: 不合并空白符,允许自动换行(在pre基础上,保留自动换行)

  [注意]<pre>元素默认带有样式white-space: pre;

  [注意]IE7-浏览器不支持pre-line和pre-wrap这两个属性值

<div>They can stay 72-hours
within the Shandong province after they have entered China via the Qingdao International Airport.</div>

文本换行

  浏览器自身带有文本自动换行的功能,文本容器的右侧可以实现自动换行

  对于英文来说,浏览器会在半角空格或连字符的地方自动换行,而不会在单词的中间突然换行

  对于中文来说,可以在任何一个文字后面换行,但浏览器碰到标点符号时,通常将标点符号以及其前一个文字作为一个整体进行换行

  所以实际上,white-space解决不了长单词或URL地址的换行问题

word-wrap

  word-wrap属性用来实现长单词或URL地址的自动换行

  值: normal | break-word

  初始值: normal

  应用于: 所有元素

  继承性: 有

word-wrap:normal(浏览器只在半角空格或连字符的地方进行换行)
word-wrap:break-word(截断单词换行,长单词从下一行开始)

  [注意]当white-space的值是nowrap或pre时,word-break和word-wrap属性都失效

  [注意]word-wrap在标准中被改为overflow-wrap,但由于兼容问题,一般还是使用word-wrap

word-break

  CSS3使用word-break属性来决定自动换行的处理方法。通过具体的属性设置,不仅可以让浏览器实现半角空格或连字符后面的换行,而且还可以让浏览器实现任意位置的换行。

  值: normal | break-all | keep-all

  初始值: normal

  应用于: 所有元素

  继承性: 有

normal: 中文到边界上的汉字换行,英文从整个单词换行
break-all: 对于英文长单词来说,会截断单词换行,长单词占据当前行剩余空间。但对于中文的处理,各浏览器不一致
[]firefox及safari: 中文到边界上的汉字换行,且允许标点置于段首
[]IE及chrome: 中文到边界上的汉字换行,但不允许标点置于段首
keep-all: 对于英文长文本不能换行,但对于中文的处理,各浏览器不一致
[]firefox: 在空白符处换行
[]IE及chrome: 在空白符及标点处换行
[]safari: 不支持

  [注意]移动端目前基本都不支持keep-all值  

  [注意]当word-break值为break-all时,word-wrap属性失效;否则两个属性都起作用

表格

  对于表单元格的长文本来说,使用word-wrap或word-break来强制换行需要设置table-layout:fixed

伪元素换行

  有一个Unicode字符,是专门代表换行符的:0x000A,在CSS中,写作'\000A',可以简写为'\A'

  但是,由于浏览器会合并空白符。因此,需要使用pre来阻止空白符的合并

  下面是一个实例

<style>
dt,dd{display:inline;}
dd{margin: 0;font-weight:bold;}
dd+dt::before{content:'\A';white-space:pre;}
dd+dd::before{content:',';font-weight:normal;}
</style>
<dl>
<dt>姓名:</dt>
<dd>小火柴</dd>
<dt>邮箱:</dt>
<dd>123@qq.com</dd>
<dd>123@163.com</dd>
</dl>

最后

  我个人理解,空白符(white-space)最常用的功能是nowrap,即不换行;而CSS3新增的两个属性word-wrap和word-break主要用于解决长文本换行的问题。word-wrap:break-word截断长文本换行,长文本从下一行开始;word-break:break-all也用于截断长文本换行,但长文本会占据当前行剩余空间

  当然,空白符(white-space)除了nowrap,还有其他的一些属性值。word-wrap和word-break也有针对中文的处理。但由于浏览器兼容器问题,用的并不是太多

  欢迎交流

深入理解CSS中的空白符和换行的更多相关文章

  1. 深入理解CSS中的层叠上下文和层叠顺序(转)

    by zhangxinxu from http://www.zhangxinxu.com 本文地址:http://www.zhangxinxu.com/wordpress/?p=5115 零.世间的道 ...

  2. 深入理解css中的margin属性

    深入理解css中的margin属性 之前我一直认为margin属性是一个非常简单的属性,但是最近做项目时遇到了一些问题,才发现margin属性还是有一些“坑”的,下面我会介绍margin的基本知识以及 ...

  3. 深入理解css中position属性及z-index属性

    深入理解css中position属性及z-index属性 在网页设计中,position属性的使用是非常重要的.有时如果不能认识清楚这个属性,将会给我们带来很多意想不到的困难. position属性共 ...

  4. 深入理解CSS中的层叠上下文和层叠顺序

    零.世间的道理都是想通的 在这个世界上,凡事都有个先后顺序,凡物都有个论资排辈.比方说食堂排队打饭,对吧,讲求先到先得,总不可能一拥而上.再比如说话语权,老婆的话永远是对的,领导的话永远是对的. 在C ...

  5. 如何理解CSS中的浮动 :其实他就像乘坐扶梯一样

    只要你用过自动扶梯,你就能很快的理解CSS中的浮动(Float). 你肯定遇到过这样的情况:       做好了,你想用CSS浮动来调整元素间的位置关系. 在写完代码之后,你发现浮动元素没出现在你设想 ...

  6. [转]深入理解CSS中的层叠上下文和层叠顺序

    http://www.zhangxinxu.com/wordpress/2016/01/understand-css-stacking-context-order-z-index/ 零.世间的道理都是 ...

  7. 理解css中的position属性

    理解css中的position 两种类型的定位 static类型:只有一个值position: static.position默认值 relative类型:包括三个值,这三个值会相互影响,允许你以特定 ...

  8. 深入理解CSS中的margin

    1.css margin可以改变容器的尺寸 元素尺寸 可视尺寸--标准盒子模型中盒子的宽度是不包括margin值的,clientWidth 占据尺寸--包括margin的宽度 outWidth不在标准 ...

  9. 深入理解css中position属性及z-index属性 https://www.cnblogs.com/zhuzhenwei918/p/6112034.html

    深入理解css中position属性及z-index属性 请看出处:https://www.cnblogs.com/zhuzhenwei918/p/6112034.html 在网页设计中,positi ...

随机推荐

  1. C++内存对齐的理解

    程序编译器对结构的存储的特殊处理确实提高CPU存储变量的速度,但是有时候也带来了一些麻烦,我们也屏蔽掉变量默认的对齐方式,自己可以设定变量的对齐方式. 编译器中提供了#pragma pack(n)来设 ...

  2. 【C-01关键字】

    一.语句引导关键字 for   while   swith  if  do   goto   return 二.限定关键字 const  static   extern 三.预编译关键字 #inclu ...

  3. iphone 耳机 线控

    有电话呼入时: 按一次接听电话: 快速按两次将电话转到语音信箱: 通话中: 按一次挂断电话: 通话中如果有第二个电话打进来时: 按一次保留当前通话并接听第二个电话: 按住两秒钟不放忽略(拒绝接听)第二 ...

  4. redis持久化以及主从服务器的配置

    作者:silenceper 日期:2013-10-03 原文地址:http://silenceper.com/archives/959.html redis 与memcached 最大的一个区别就是R ...

  5. windows management instrumentation服务未启动-解决脚本

    桌面新建.txt文件 将以下代码放入 保存为.bat文件 执行即可 @echo on cd /d c:\temp if not exist %windir%\system32\wbem goto Tr ...

  6. [leetcode 35] Search Insert Position

    1 题目: Given a sorted array and a target value, return the index if the target is found. If not, retu ...

  7. Xml文件并发读写的解决方法

    之前对xml的操作大都是通过XmlDocument对象来进行,但是这样的情况对于没有并发的是非常合适的,最近遇到了并发读写xml文件的情况.通过文件流来操作能解决大部分的并发情况,对于极端的情况会有问 ...

  8. 微信公共平台开发-(.net实现)1--成为开发者

    刚换了个新环境,哎这都快一个月了,还没适应过来,还是怀念老地方呀.老板让开发一个基于微信平台的开发项目,而且是用net实现.当时就蒙了,微信就用了一会个人赶脚不好,所以果断不用,现在让开发,而且查了一 ...

  9. 完美实现类似QQ的自拍头像、上传头像功能!(Demo 源码)

    现在很多下载客户端程序都需要设定自己头像的功能,而设定头像一般有两种方式:使用摄像头自拍头像,或者选择一个图片的某部分区域作为自己的头像. 一.相关技术 若要实现上述的自拍头像和上传头像的功能,会碰到 ...

  10. 一个不陌生的JS效果-marquee,用css3来实现

    关于marquee,就不多说了,可以戳这里. 毕竟他是一个很古老的元素,现在的标准里头也不推荐使用这个标签了.但平时一些项目中会经常碰到这样的效果,每次都是重新写一遍,麻烦! JS类实现marquee ...