文字处理之一：空白字符及white-space属性

Edison 发布于2019-08-30 15:44 / 1315人阅读

摘要：浏览器的默认行为浏览器支持种空白字符空格制表符回车换行。关于换行的具体细节在下一篇博客介绍，这里我们简单点，只考虑中文字符，字数多了放不下就换一行。

p标签中插入一段文字，是非常常见的需求，但是仔细分析，这里面有很多需要注意的细节。这篇和下篇博客，主要讲对于文本内容显示的处理，这篇主要介绍空白字符和white-space属性。

浏览器的默认行为

浏览器支持4种空白字符：空格、制表符、回车、换行。默认情况下，有以下几点：

所有的空白字符，都会当成空格处理

Hello World

hello world之间加了一个换行符，但是最后显示的效果如下：

插入的是换行符，但是最后显示的时候变成了空格。这也就说明，如果我们有两段文字，在一个p标签内并不会保留换行符。要想实现换行效果，要么用两个p标签，要么用
来换行。

头尾的空白符会直接忽略

hello world

在头部和尾部都有空格，但最后显示时，两边的空格会直接忽略。如果头尾是换行，也会被忽略掉。为什么要这样做呢，比如我们写代码的时候，为了结构清晰通常喜欢排版一下：

hello world

最后的显示效果如下：

p标签内部首尾的两个换行符都会直接忽略，使得我们排版带来的空白字符就不会影响最后显示的效果。span标签内部首尾的空格也会被忽略，所以，不要指望在span包裹的hello之后和world之前加入空格来增加两者间距。

多个空格会被合并

这一点应该比较熟悉，我在hello和world之间插入100个空格，也只会显示一个而已。那么如果我想插入多个空格呢，就只能用到字符实体这种东西了，也就是。

Hello World

white-space属性

浏览器的这种默认行为，为我们提供了很多便利，也符合我们的日常需求，比如代码的排版不会对展示产生过多影响。但是，这种默认行为也并不总是符合我们的需求。如果需要改变，可以通过white-space属性来实现，顾名思义，这个属性就是控制空白字符的，同时，他也会对浏览器的默认换行行为有一些影响。

white-space:normal，这是默认值，也就是浏览器的默认行为。除了上面提到的空白字符的处理外，当文字在一行放不下时，浏览器还会自动换行。关于换行的具体细节在下一篇博客介绍，这里我们简单点，只考虑中文字符，字数多了放不下就换一行。

文字有点多文字有点多文字有点多文字有点多文字有点多文字有点多文字有点多文字有点多文字有点多文字有点多文字有点多文字有点多文字有点多文字有点多文字有点多文字有点多文字有点多文字有点多文字有点多文字有点多

最后显示的效果如下：

white-space:nowrap：所谓wrap，翻译成中文就是包裹，在CSS里面，我们可以理解成当一行放不下时，为了让他不超出容器，浏览器就要给文字换行，将文字包裹起来。那么nowrap就是不包裹，也就是文字超出就超出吧。

最后显示的效果如下：

white-space:pre：我希望我写的格式就是最终展示的浏览器，浏览器不做任何处理，那就用这个值，或者用

标签也一样的效果

最后显示的效果如下：

我在开头加的空格没有被忽略，中间加的换行符也没有被当成空格，甚至多个换行符也没有被合并，第二行超长了也没有自动换行。总之，浏览器没有做任何处理。

white-space:pre-wrap：pre的效果看来有点太粗暴了，我还需要wrap包裹一些，也就是在pre的基础上希望自动换行。

最后显示的效果如下：

white-space:pre-line：line是一行的意思，加上line代表我更加强调换行，所以我就保留换行符，并且保留浏览器的wrap换行，这两个都是跟换行相关的。空格还是该合并合并，该忽略忽略，不跟pre一样搞了。

最后显示的效果如下：

总结一下

这个属性其实控制的是三点：

换行符是否当成空格处理

多个空格是否合并，收尾空格是否忽略

是否自动换行

每个属性对应的行为也就是下面的表

	换行符	空格符的合并及忽略	自动换行
normal	当成空格，并且合并	合并	是
nowrap	当成空格，并且合并	合并	否
pre	保留	保留	否
pre-wrap	保留	保留	是
pre-line	保留	合并	是

关于换行，也还是有很多细节的，下一篇详聊~

云服务器专线服务 java空白字符处理删除空白字符串属性处理数据处理及分析

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

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

【芝士整理】CSS基础图谱

摘要：为了实现文字环绕效果，规范规定的措施是使父容器塌陷，元素脱离文档流浮动产生，元素周围的内容转换为围绕元素排列。选择器注意点属性选择器 [attr^=value] - 开头或全等 [attr$=value] - 结尾或全等 [attr*=value] - 包含值 [attr~=value] - 字符串包含选择器组 A > B - 直接子节点 A + B - 下一个兄弟节点 A...

iOS122 2019-08-30 15:54 评论0 收藏0
14 ,CSS 文字与文本

1.CSS 中长度与颜色 2.CSS 中的文字属性 3.CSS 中的文本属性 14.1 CSS 中长度与颜色长度单位说明 in 英寸 cm 公分 mm 公里 cm 以目前字体高度为单位 ex 以小写字母高度为单位（大部分不支持） pt 1pt/72英寸 pc 1pc/12pt px 像素（推荐使用）颜色单位：说明十六进制如：color:#ff0000 颜色名称如：color:red ...

blankyao 2019-04-23 11:42 评论0 收藏0
css文本属性

摘要：的区别指字母间距，对英文和汉字，空格都有效，也可以叫字符间距。指单词间距，对汉字不支持。时的效果压缩空白和换行符，排满不换行。纵向长度，可为负值，向下为正。阴影的模糊长度。的使用有了文字描边，就有文字填充色。 1. letter-spacing,word-spacing,white-space的区别 letter-spacing指字母间距，对英文和汉字，空格都有效，也可以叫字符间距。 ...

Tony_Zby 2019-08-30 15:53 评论0 收藏0
css文本换行总结

摘要：到文本过长的问题，元素的宽度不足以容那文本的内容，文本超出元素显示，遇到这种情况，一般有两种处理方式，一种是超出省略不显示，很暴力，很直接，还有一种就是换行显示，下面我将会介绍几种种常用的换行方法。但文本内的换行无效。到文本过长的问题，元素的宽度不足以容那文本的内容，文本超出元素显示，遇到这种情况，一般有两种处理方式，一种是超出省略不显示，很暴力，很直接，还有一种就是换行显示，下面我...

Caizhenhao 2019-08-29 17:16 评论0 收藏0
CSS魔法堂："那不是bug，是你不懂我!" by inline-block

摘要：那不是，是我不懂而已。的用途之一西文是以空格来分隔单词的，而汉字间则无需空格分隔，但为了统一西文东亚和的排版，于是抽象出一个名为的概念用于分隔词义单元，则作为的值域，而定义域就是语言信息。前言每当来个需要既要水平排版又要设置固定高宽时，我就会想起display:inline-block，还有为了支持IE5.5/6/7的hack*display:inline;*zoom:1;。然后发...

cucumber 2019-08-30 12:56 评论0 收藏0