CSS进阶（19）—— CSS中的文本处理（下）

CSS有不少属性专门用来对文本进行控制，因为这些属性的做用机制每每是基于内联盒模型的，所以对于内联块状元素也是有效果的，如咱们最经常使用的text-align:center可让内联元素水平居中。本章咱们就来深刻探索一下CSS中的文本控制属性。

1.text-indent负值的妙用

text-indent指对文本首行的缩进控制，设计初衷就是为了实现段落文本的首行缩进2em的效果。可是这种缩进对内容的要求比较高，若是段落掺杂英文单词，长数字或图片等内容，就会致使段落层次不齐的感受，所以text-index的首行缩进已经逐渐坐实冷板凳了。虽然text-indent没能在首行缩进上作出贡献，但text-indent的负值却一不当心有了做用。

首先用的比较多的是text-indent负值隐藏内容，如网站的logo，从SEO的角度讲，咱们能够用h1标签来放置咱们的标识，同时写上对应的文字内容，例如：

<h1 class="logo">CSS世界</h1>
<style> .logo{ width:120px; background:url('logo.png'); text-indent:-120px; } </style>
复制代码

固然若是你为了保持通用性，你能够设置.hide{text-indent:-9999px}，但根据做者的提示，这么作会存在一些潜在的风险，具体可问下度娘的建议。

text-indent在使用的时候须要注意，text-indent的百分比值是相对于当前元素的“包含块”计算的（包含块的科普在绝对定位那章已经讲过），所以text-indent：100%有些状况下会出问题，什么状况下呢？当包含块的宽度小于内联元素的宽度就会出问题了，什么状况下包含块的宽度会小于内联元素的宽度呢？你本身想，我就给您提个醒，元素的隐藏也不建议使用这种作法。所以就很少聊了。text-indent仅对第一行内联盒子内容有效，所以咱们能够借助这个特性，来实现一些仅对第一行有特殊要求的布局，好比下面这个例子：

<style> p{ padding-left: 3em; text-indent: -3em; width: 300px; } </style>
复制代码

因为markdown编辑器支持标签语言，所以咱们能够直接预览最终效果以下（小提示：你能够经过浏览器直接检查下面的元素看到CSS样式）

赵本山：人是衣，马是鞍，一看长相二看穿.白天想，夜里哭，作梦都想去首都.俩脚离地了，病毒就关闭了，啥都上不去了，嚎.

宋丹丹：改革春风吹满地，吹满地，春风吹满地.中国人民真争气，真争气，人民真争气.这个世界太疯狂，耗子都给猫当伴娘.齐德隆，齐东强，齐德隆的咚得隆咚锵

2.letter-spacing字符间距与word-spacing"单词间距"

letter-spacing能够用来控制字符之间的间距，例如

<p>letter spacing</p>
<style> p{ letter-spacing: 0.5em } </style>
复制代码

letter spacing

letter-spacing除了能够用了控制字符之间的间距以外，还支持负值，在了解负值以前，须要注意一个点，letter-spacing的默认值是normal，而不是0，虽然在大部分状况下这两个值是近似相同的，但在某些场景下letter-spacing会调整normal的计算值来实现更好的文字排版。

letter-spacing在>=0的时候，能使字符的间隔增大，那么当letter-spacing<0的时候，会怎么样呢？眼见为实

<p>letter spacing负值</p>
<style> p{ letter-spacing: -0.2em } </style>
复制代码

letter spacing负值

能够看到，文字已经有部分重叠了，当咱们继续增长负值的时候，当负值足够大的时候，文字直接反过来写了，同时能够发现另一个现象，就是首字母l的位置始终保持在近似居中的位置，从理论上讲，首字母的位置彻底没有发生改变，这个能够本身测试下看看。

letter spacing反过来

利用这个反向排列的特色，咱们能够实现一个文字依次飞入的效果，连接在下方。

文字飞入效果

讲完了letter-spacing字符间隔，咱们再来聊聊word-spacing单词间距，眼尖的小伙伴可能一经发现，我给word-spacing的"单词间距"打了引号，为何要打引号呢？由于word-spacing并非真正做用于每一个单词，如今尚未哪一个算法彻底支持识别单词的，所以word-spacing干脆偷个懒，直接做用于空格不就完事儿了嘛，换句话说，word-spacing的做用就是增长空格的间隙，有空格就有效，鉴于英文单词之间的空格较多，这个属性不太符合我国国情，这里就不详细介绍了。

下面咱们来聊聊letter-spacing和word-spacing还具备哪些特性：

• 都具备继承性，所以你能够经过letter-spacing:normal重置样式
• 默认值都是normal而不是0
• 都支持负值，均可以让字符重叠和反向显示
• 都不支持百分比值。
• 都会受到text-align:justify两端对齐的影响

3.支持“人性化”的word-break

本节原文的内容是了解word-break和word-wrap的区别，通过本人测试，word-wrap:normal/break-word；两个属性值好像没什么区别，所以，咱们仍是聊聊word-break属性吧。

在上文中咱们讲到了众所周知的“文字换行”在SVG须要手动才能实现，在CSS中，就是由word-break来掌管文本的换行的，通常状况下，咱们不多去用word-break属性，这是咱们国家的国情致使的，对于中/日/韩文来讲，任何一个文字均可以做为一个单词被换行，所以当中文在一行放不下的时候就会自动换行，可是英文却有所不一样，咱们知道英文的每一个单词的长度会有所不一样，有的单词长，有的单词短，遇到须要换行的时候，就会有两种方案。

第一种是word-break:normal。单词放不下的时候直接换行，无论上一行留了多少空白，这会致使一个什么问题呢？就是咱们在放网址的时候，因为域名是连续的“长单词”，所以会出现一大段很长的空白，很很差看。

为了解决上面的问题，就出现了第二种方案，word-break:break-all，不论是什么字符，遇到本行放不下就直接换行，且保证当前行已经被放满。来看看二者有什么不一样吧。

所以这两种方案在选择的时候须要结合实际场景，这里不过多演示。

4.空格符与换行符的管理员white-space

white-space属性声明了如何处理标签内部的空格和回车，这里的回车指的是键盘上的回车键，跟自动换行没有关系，你能够理解为手动换行符。咱们须要注意的是，除了space键能够生成空格，tab键也能够生成空格。 white-space包含如下五种属性，建议收藏到本身的备忘录里以便查阅。

• normal：默认属性，合并空白字符和换行符。意思就是看见连续的空格或回车，一概处理成单个空格。
• pre：空格字符不合并，而且内容只有在有换行符的地方换行，也就是自动换行的能力消失。
• nowrap：书上说，该值和normal同样会合并空白字符，但不容许文本环绕，我的对不容许文本环绕的理解就是，内容不会在任何状况下换行，后面有关文本环绕的部分所有用手动换行和自动换行是否有效来讲明。
• pre-wrap：空白字符不合并，而且内容会在有换行符的地方换行，也支持自动换行。
• pre-line：空白字符合并，内容支持自动换行和手动换行。

上面只是概念性的东西，做者将上面这些属性整理成了表格，这里我就借花献佛，所谓文本环绕，你只要理解成是否支持自动换行便可。

除了概念以外，我还对这些属性作了测试，来看一下下面这个例子，不理解的童鞋能够对照着表格和下面的例子来记忆这些属性。

<div class="normal">合并空白字符和换行符</div>
<div class="pre">空白    字符不合 并，而且只有在有换行符的地方
换行
</div>
<div class="nowrap">合并空     白字符，可是不能
换行,换行符用空格
代替
</div>
<div class="pre-wrap">空白字符  不    合并，容许自动换行和
手动
换行
</div>
<div class="pre-line">空白字符     合并，容许自动换行和
手动
换行
</div>
<style> div{ width: 8em; margin: 40px 0; } .normal{ white-space: normal; } .pre{ white-space: pre; } .nowrap{ white-space: nowrap; } .pre-wrap{ white-space: pre-wrap; } .pre-line{ white-space: pre-line; } </style>
复制代码

上面咱们已经了解了white-space的概念，下面咱们来说讲white-space的一些实际应用。

首先white-space最普遍的应用应该是配合overflow:hidden以及text-overflow:ellipsis来实现单行文字超出部分省略号的效果，这里利用的norwap属性文字不换行的特性。

<div class="hideText">单行文字超出部分用省略号显示</div>
<style> .hideText{ width: 200px; font-size: 20px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } </style>
复制代码

因为markdown编辑器支持标签语言，所以咱们能够直接预览最终效果以下（小提示：你能够经过浏览器直接检查下面的元素看到CSS样式）

单行文字超出部分用省略号显示

还记得咱们在absolute章节讲过的包含块太小致使的文字一柱擎天的解决方案吗？就是利用norwap的不换行属性解决的，除了以上两个应用，white-space还在不少地方很是有效，这里就不过多介绍了。

5.神奇的text-align:justify

text-align支持文字左中右对齐，默认为text-align:left，左对齐。这里咱们来聊一聊text-align:justify两端对齐属性。在讲word-break的时候，我提到了浏览器遇到连续的长单词后，不能很好的进行换行，所以就会致使英文的显示出现一种层次不齐的效果，以下例：

<p>There's a long line of English here. I'm going to write it as an article.</p>
<style> p{ width: 200px; } </style>
复制代码

因为markdown编辑器支持标签语言，所以咱们能够直接预览最终效果以下（小提示：你能够经过浏览器直接检查下面的元素看到CSS样式）

There's a long line of English here. I'm going to write it as an article.

为了解决这个问题，便有了text-align:justify属性来支持两端对齐。就最终的渲染表现来看，chrome浏览器对类中文文字使用了letter-spacing间隔算法，对类英文使用了word-spacing间隔算法，而IE浏览器只有word-spacing间隔算法，所以若是须要作向下兼容，咱们须要完整的写上以下代码。

<!-- text-align:justify在英文中的表现 -->
<p>There's a long line of English here. I'm going to write it as an article.</p>
<style> p{ width: 200px; text-align: justify; text-justify:inter-ideograph; } </style>
复制代码

因为markdown编辑器支持标签语言，所以咱们能够直接预览最终效果以下（小提示：你能够经过浏览器直接检查下面的元素看到CSS样式）

There's a long line of English here. I'm going to write it as an article.

text-align:justify实现的是内联元素的两端对齐效果，所以不只仅是纯粹的文字，对于inline-block元素，text-align:justify也能实现较好的自适应两端对齐的效果，事实上flex布局中提供了这个对齐方式的简易版，因为text-align:justify要实现元素的两端对齐有一个很是蛋疼的限制条件以及最后一行须要特殊处理，所以建议直接使用flex布局中的内容。若是对justify实现两端对齐感兴趣的童鞋能够访问张鑫旭的官方连接~

6.杂七杂八了解一下就好的属性

关于CSS的文本处理能力，没有详细写的还有以下几个属性，我的认为不怎么重要，了解一下就好.

text-decoration:underline。给文本添加下划线，能够用border-bottom代替，并且border-bottom好控制一些，还能用虚线和虚点，所以这个下划线属性基本没什么软用。除了下划线外，text-decoration还支持上划线，那就更没有什么软用了，好在他还支持中划线，以下图所示，因为下图的样式模拟起来可能有必定困难，所以能够了解一下text-decoration：line-through中划线属性。

text-transform:uppercase/lowercase。这个属性主要用于控制字符大小写，在某些场景可能比较有用，好比身份证最后一位若是是x的话，此时你输入小写的x，能够经过text-transform:uppercase自动转成大写，这样无论输入小写的x仍是大写的，最终的结果都是正确的。

其余诸如:first-letter和:first-line的伪元素，在实际场景中基本用不到，若是咱们须要操做某一句话的某些字符的话，用正则匹配便可，如匹配关键字，用标签替换文字，所以这两个伪元素就不过多介绍了。

CSS中的文本操做就讲到这儿，有什么问题欢迎指出，指出我也不会听你的，下一章是关于元素的装饰和美化的，如color,background-color等等，以为本文有用的点个赞吧。

不忘初心，方得始终

喜欢博主的童鞋能够扫描二维码加博主好友~ 也能够扫中间二维码入驻博主的粉丝群（708637831）~固然你也能够扫描二维码打赏并直接包养帅气的博主一枚。