从超长文本显示谈起的一些废话

前言

最近在做面向C端用户的小程序项目的我一直遇到超长文本需要显示省略号的问题…

例如下图

C端产品中类似的场景会非常多，毕竟你永远无法保证用户会输入什么鬼东西。如果不做超长文本的处理，那界面就会变成这样子…

如果显示成这样，不仅自己看着难受，UI同学也不会放过我。

所以怎样处理超长文本的显示呢？

解决方案

脑海中第一反应是text-overflow: ellipsis，这种处理没毛病，但是多行的超长文本，比如上图的例子怎么办呢？

网上的标准代码如下：

overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;

这四行CSS就完美解决了上述问题，那这篇文章就该结束了吧…没耐心继续看的同学看到这里就已经可以解决问题了，如果不明白为什么这么写的可以继续看下去…

Flex Box

关于overflow: hidden非常容易理解，可是下面三行是什么意思？怎么从来没用过？

于是我仔细查了关于display: box的内容，不查不知道，一查就为我开启了新世界的大门。

其实这涉及到了CSS3中的一种盒模型box-flex，不同于我们最常使用的flex布局，box-flex布局一直没有被CSS纳入标准，使用的时候也不得不加上-webkit或者-moz等前缀。（本文浏览器默认为Chrome，所以代码中只会加-webkit）

box-orient

可选值：horizontal | vertical

上述代码中的box-orient是用来表示父容器的子元素的排列方式是水平排列(horizontal)还是竖直排列(vertical)，如下图：

box-orient: horizontal

box-orient: vertical

line-clamp

可选值： none | 任意数字

这个属性用来表示容器中最多显示的行数。如果需要最多显示3行的超长文本，就可以设置line-clamp: 3。默认值是none，表示不限制行数。

box-direction

可选值：normal | reverse

默认值是normal，表示子元素按照文档流中正常的顺序排列；如果设置box-direction: reverse，表示子元素倒序排列，如下图：

box-direction: reverse

box-align

可选值： start | end | center | stretch

这个属性用来表示子元素在父容器中的垂直排列方式。

box-align: start表示靠顶部对齐

box-align: end表示靠底部对齐

box-align: center表示居中对齐

box-align: stretch表示子元素拉伸到与父元素等高

box-pack

可选值： start | end | center | justify

这个属性用来表示子元素在父容器中的水平排列方式。

box-pack: start表示靠左对齐

box-pack: end表示靠右对齐

box-pack: center表示居中对齐

box-pack: stretch表示等分父元素的宽度对齐

后记

其实看到这里大家已经发现了，box-flex特别像我们每天都在使用的flex布局，但是身世可怜的它并没有被CSS的主流标准接受，但是也是CSS3的世界中的一部分，至少在处理多行超长文本显示的时候，还会被人们想起。

本文完，如有问题，欢迎指正。