纯css控制文本的显示格式

今天开发中遇到一个需求：

标题，要求最多显示一行，超过部分用省略号代替...

副标题，要求最多用两行来显示，超过部分用省略号来显示...

对于第一个，css中有明确的支持，使用三个属性可以轻易的达到效果

                    overflow: hidden;            //   溢出隐藏
                    white-space:nowrap;     //    溢出不换行
                    text-overflow:ellipsis;     //    超过部分用省略号

这是针对一行显示的文本，不能用于两行或者三行的情况

下面介绍适用于多行的情况

                    overflow:hidden;               //   溢出隐藏
                    text-overflow:ellipsis;         //    超过部分用省略号
                    display:-webkit-box;           //  声明容器为弹性盒子
                    -webkit-box-orient:vertical;    //  容器对于里面文本的排列方向-垂直
                    -webkit-line-clamp:2;               //  行数的控制   2行  （这里可以自己设定）

通过上面的配置就可以用纯css的方式来达到效果，另外传统的用js控制的方式也做一个简单的原理的说明，开发过程中确定两行最多能放几个字符，js接受到后台传递过来的字符后，对字符串进行截取再跟‘...’作拼接达到‘XXX...’的效果