css文本溢出截断

[bibi7]

在做小玩具的时候遇到的需求，基于一些不同的情况，比如单行截断或者多行截断的处理也不太一样。做个小总结吧。

单行截断的情况：

overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;

适用于一行文本的情况，理解起来挺简单的，兼容性也不错。

多行截断

之前的写法只能支持单行，多行的话要稍微做点小变招：

/*核心依旧是这两个*/
overflow: hidden;
text-overflow: ellipsis;

display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;

其实box和现今的flex是相差不多的，flex从提案到定型前前后后发布过三个版本，分别是旧版“box”、混合版“flexbox”和标准版“flex”，所以这两个属性-webkit-box，-webkit-box-orient其实就比较好理解了，分别对应的是flex和flex-direction。 至于-webkit-line-clamp用来决定块元素显示的文本的行数，但是并未纳入css规范中，目前使用依旧只能带上前缀，并且兼容性一般。

绝对定位

这个其实就是脑子里突然想了一下，主要这么几个步骤，不贴代码了：

1. 做一个省略符号的伪元素，且绝对定位于文本区块的右下方
2. 文本区块的内容右下方保留些许空间

但是缺点也很明显，省略符必然出现，只能适用于很极端的业务场景