css超出显示省略号
2019-05-15 本文已影响0人
ufellow
1.单行文本显示省略号
overflow: hidden; 超出隐藏
white-space: nowrap;文字不换行
text-overflow:ellipsis;隐藏的部分用...表示
2.多行文本显示省略号
p {
overflow:hidden;
text-overflow:ellipsis;
display:-webkit-box; 设置为弹性盒子模型
-webkit-box-orient:vertical; 内容为竖直排列
-webkit-line-clamp:2; 显示两行文字
}
但是 -webkit-box-orient:vertical会存在失效的情况,可使用下面几行代码替换
/* autoprefixer: off */
-webkit-box-orient: vertical;
/* autoprefixer: on */
如果还是不生效可以替换为
-webkit-box-orient: vertical;
/* autoprefixer: on */```
这种方法适合webkit内核的浏览器,也可以使用定位和带(...)的元素。
.box {
position:relative;
line-height:1.4em;
/* 3 times the line-height to show 3 lines */
height:4.2em;
overflow:hidden;
margin-bottom: 8px;
}
.box:after {
content: "...";
font-weight: 800;
position: absolute;
bottom: 0;
right: 0;
// padding:0 20px 1px 45px;
}```