今天开发中遇到一个需求:
标题,要求最多显示一行,超过部分用省略号代替...
副标题,要求最多用两行来显示,超过部分用省略号来显示...
对于第一个,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...’的效果