如何控制文本只能显示两行，多余的截取为省略号，要求纯css实现，兼容主流浏览器（含IE 8）...

发布于
2016-06-01

纯css实现文本两行缩略省略号

1.要求：不用js，js已经可以实现，但是总觉得大材小用了
2.兼容IE8.

.line{
        overflow : hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }

网上普遍这种解决，还有图片解决的，伪元素的，但是都存在些问题，所以求大牛给点意见和解决方案..谢谢啦。以前处理是交给后端，但是现在前端..

css html

html5 javascript

阅读 16k

5 个回答

PiLee

✓ 已被采纳

疏忽了，知道伪元素的问题了，的确是要确定文字超过2行的情况。
既然要兼容IE8，个人建议还是后端处理或者前端JS吧。

伪元素的只适合文字绝对会被省略的情况

<style>
p {
    width:10em;
    position:relative;
    line-height:1.4em;
    height:2.8em;
    overflow:hidden;
}
p:after {
    content:"...";
    position:absolute;
    bottom:0;
    right:0;
    background:#FFF;
    padding-left:0.2em;
}

</style>

<body>
    <p>哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈</p>
</body>

火狐和IE8效果：
图片描述

cxxsn

49549

发布于
2016-06-02

可以参考这里，利用浮动元素的特性来实现。

golden_freeman_china

1.8k1211

发布于
2016-06-02

拿去玩，说爱我~

div.content{
    font-size:.8rem;
    line-height:1.2rem;
    height:2.4rem;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}