前端进阶|第十四天 文本溢出除了截断还是CSS3

日常工作中，我们经常会碰到文字的宽度或者高度超过元素的大小，这个时候最长采用的方法就是文字截断，简而言之，就是把在显示前，对文本进行截取处理，只留固定的字数，这种方案虽然好用，但操作起来有点不太酷，如果字符里面混有英文字母数字，会导致字数相同，但宽度不同，显示参差不齐。

某次项目经理为了留多少字纠结半天，从100，120，150，160，180，200，然后又回到100，为此我差点跟他打起来。

当然也可以根据容器宽度来动态决定留多少字。但事实上CSS3已经给我们提供了轻松处理这个事情的方案。

单行

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

核心属性
text-overflow: [ clip | ellipsis | <string> ]{1,2}

clip：默认值，将溢出的文本裁减掉
ellipsis：将溢出的文本用省略号(...)来表示
<string>：设置一个字符串用来表示溢出的文本

string 怎么设置，试了半天没试出来，有道友说只对火狐有效，嗯，明天去公司试下，如果仅针对火狐就有点鸡肋。

多行

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

首先为了保证容器对宽度敏感，需要设置其display 模式，除了-webkit-box，flex也是OK的。
其次设置盒子的方向，一般是垂直，即限制其垂直方向的显示方式， 然后就是关键属性 -webkit-line-clamp登场，限制其要显示的行数。

试过，谷歌模式下OK，目前这些属性已经广泛应用，只要不要IE6，一般都扛得住。

失踪半个月，继续加油。