CSS 文本控制

18 小时前  ·  159 人阅读

学习一些 CSS 文本控制的属性，防止做傻事。请大家对照下面列表检验下： 会的、不会的、似懂非懂的。笔者是一个也不会。
多行显示省略号
overflow : hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;


1.  white-space
2.  text-overflow: ellipsis;
3.  word-break, word-wrap
4.  text-align: justify
5.  text-decoration
6.  text-transform
7.  text-indent
8.  letter-spacing
9.  word-spacing

## 文本溢出显示(...)

.truncate {
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}

这个简单的 css语句，使用的比较多了吧，那么请解释下 white-space 和 text-overflow，我尼玛，并不会是不是。


## white-space

white-space用来设置内容中的空格的处理方式。

white-space：normal | pre | nowrap | pre-wrap | pre-line

`white-space: nowrap`不换行，空格会被合并: 1\. 第一行开始我写了好多空格在实际效果中被合并成了一个；2\. 然后中间又键入了回车，但是前端并未换行； 3. `<br />`是可以使文本换行的;

`white-space: pre`保留空格(包括键入的回车换行)，单行文本过长时不会自动换行, `<br />`在任何情况下都是可以生效的。


pre-wrap是pre 的升级版，当单行文本过长，`超过文本边界`时自动换行。请自行演示代码。pre-line作为自学内容。

## text-overflow

用来定义当文本超出容器边界时如何处理。

/切断 | 使用省略号 | 使用自定义的字符串/
text-overflow: clip|ellipsis|string;

看个极端点的例子： 给 div 宽度限定为 width:500px,然后 overflow: hidden 确定该 div 的 文本边界，不能再多了，再然后 white-space: pre 保留空格，但是当文本超出边界时不会自动换行，这样每行文本就都超出了边界，此时我们再尝试使用 text-overflow 进行溢出限制。


那么现在就可以解释单行文本溢出时加三个点显示的代码了：

white-space: nowrap; /容器内的文本单行显示/
overflow: hidden; /确定文本边界，容器的边界就是文本的界限不可以突出去/
text-overflow: ellipsis; /超出的部分使用3个点代替/

不要忘记思考： 多行文本溢出，省略显示如何实现。

## word-break, word-wrap

推荐大家阅读[你真的了解word-wrap和word-break的区别吗](https://www.cnblogs.com/2050/archive/2012/08/10/2632256.html)、
[word-wrap 和 word-break 问答](https://segmentfault.com/q/1010000009854364)

每种语言都有各自的默认`断字规则`，在哪个位置可以插入break-points(断点)，当需要换行显示时，会根据这些断点来决定从文字的哪个位置开始换行。 比如汉字`你好吗`的断点`你·好·吗`，中间的点表示断点的位置； 比如英文`hello world`的断点`hello·world`;

那么，我们可能想要改变这些默认的断点规则，word-break属性就是做这个的，它会改变默认的断点规则。当设置word-break: break-all;的时候，上面的汉字断点规则并没有改变，英文的断点除了默认的空白符和符号断点外，还会在任意两个字母之间添加断点，也就是说任意位置是可以断开的，此时英文`hello world`的断点也就变为`h·e·l·l·o·w·o·r·l·d`;

文字排版会按照断字规则（浏览器规则或自定义规则）进行排版，如果一个很长很长的单词中间又是不可断的时候word-wrap就可以上场了，word-wrap 是用来决定允不允许单词内断句的，如果不允许的话长单词就会溢出。word-wrap: break-word它会首先尝试将整个长单词挪到下一行，看看下一行的宽度够不够，不够的话还会进行单词内的断句。

`word-break: normal|break-all|keep-all;`word-break的本质是更改断点规则， normal 正常规则，break-all 到处都可以断，keep-all只能在半角空格或连字符处换行（试试长中文的句子就明白了）。



`word-wrap: normal|break-word;`normal，只在允许的断字点换行基于浏览器默认设置或者 word-break 的设置。break-word它会首先尝试将整个长单词挪到下一行，看看下一行的宽度够不够，不够的话就进行单词内的断句。

综上，我自己明白了，可能大家已经被我绕晕了。



## white-space word-wrap word-break 三者的关系

white-space、word-wrap、word-break 是不太好理解。没解释明白的话，请跳转连接看看大牛们的文章。

若设置了 white-space 后，word-wrap 和 word-break又如何表现呢？ 请记住white-space 老大，word-break 老二，word-wrap 第三。如果设置了 white-space: nowrap，后两者是不起作用的。


## text-align: justify 两端对齐

是不是都用过 text-align: left | right;那么 justify 是干什么的呢？下图是个常见的需求文字两端对齐。


> 笔者曾经使用` `来打空格，真是 SB 啊，用这么 low 的方法明显反应出我既不会 text-align 也不会 white-space。

css的两端对齐有个`坑`,最后一行的文字不会两端对齐，而是左对齐。
推荐大家看看[大漠的解释](https://www.w3cplus.com/css/text-align-justify-and-rwd.html)： 在其自然状态下，"text-align:justify"就不能工作，除非内容足够长并引起一个换行符。否则，文本仍然左对齐。如果你想知道这是为什么，这是因为在排版中这是理想的行为——一个块中的最后一行文本总是左对齐。也许这是一个CSS规范设计，即使我们只有一行文本，这一行还是像最后一行一样，让文本左对齐👍。

如何保证两端对齐呢？ 人为插入一行`东西`,使得文本处于倒数第二行。


## text-decoration

文字装饰`text-decoration : none | underline | blink | overline | line-through`
在修饰 a 标签时用的较多用于去除下划线。

a {
text-decoration: none;
}

## text-transform👏

text-transform 属性控制文本的大小写。学会了该属性，我们再也不用使用 js 来切换大小写了。
`text-transform: none | capitalize | uppercase | lowercase`



## text-indent👏

控制首行缩进，有了它也不用`&nbsp`了,简单好用。

p {
text-indent:50px;
}

## letter-spacing word-space

letter-spacing和word-spacing这两个属性都用来控制元素中的空白宽度的。letter-spacing添加字母之间的空白，而word-spacing添加每个单词之间的空白。请大家注意，word-spacing对中文无效。