在分享此方法之前,先来学习一下另一个知识
说明:关于display设置弹性盒布局不了解的童鞋可以看我的另一篇文章:display的详细用法
display:flex;display:box;display:flexbox;的区别
上面是三种设置弹性盒布局的方式,分别代表不同时代的设置弹性盒布局的方式:
display:box;是09年的语法版本,使用时需要加上浏览器的前缀,目前已经过时
display:flexbox;11年提出的一个奇葩的语法版本,非官方的,
主要是为IE10浏览器使用
display:flex;12年之后提出的最新修正的语法版本,浏览器支
持交好,是目前常用的语法
下面的表格是详细的版本适用信息
display:box
浏览器支持:
IE | Firefox | Chrome | Safari | Opera |
---|---|---|---|---|
不支持 | 2.0-40.0 (-moz-) | 4.0-45.0 (-webkit-) | 6.0-8.0 (-webkit-) | 15.0-29.0 (-webkit-) |
display:flex
浏览器支持:
IE | Firefox | Chrome | Safari | Opera |
---|---|---|---|---|
11.0+ | 22.0+ | 21.0+(-webkit-) 29.0+ | 6.1+(-webkit-) 9.0+ | 15.0+(-webkit-) 17.0+ |
较为完整的兼容性代码,如下:
.box {
display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */
display: -moz-box; /* Firefox 17- */
display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */
display: -moz-flex; /* Firefox 18+ */
display: -ms-flexbox; /* IE 10 */
display: flex; /* Chrome 29+, Firefox 22+, IE 11+, Opera 12.1/17/18, Android 4.4+ */
}
基于上面的说明,下面的就很好理解了
文本超出部分的省略号显示通用的方法
/*将盒模型转换为弹性盒模型*/
display:-webkit-box;
display:-ms-flexbox;
display:-webkit-box;
display:flex;
/*限制一个块元素中显示的文字的行数*/
-webkit-line-clamp: 1;
/*检索或设置伸缩盒对象中子元素的排列方式*/
-webkit-box-orient: vertical;
/*可以用来设置当文本超出-webkit-line-clamp设置
的显示文字行数时,后面的用省略号“...”表示*/
text-overflow: ellipsis;
/*超出部分文本设置隐藏*/
overflow: hidden;
总结:将上面的代码进行复制,就能得到多行文本超出部分显示
“...”了。