单行省略号，多行省略号

发表于 更新于 分类于 阅读次数： Waline：

利用 CSS 实现单行文本省略号、多行文本省略号。

单行省略号

核心代码

Firefox 从 7.0 开始兼容text-overflow:ellipsis;这样的话，以后单行的省略号就可以不借助后台程序或者 js 来做到浏览器兼容了，其核心代码为：

1
2
3
4
5
6
7
selector{
    -o-text-overflow: ellipsis;  /*兼容 opera*/
    text-overflow: ellipsis;  /*这就是省略号喽*/
    overflow: hidden;  /*设置超过的隐藏*/
    white-space: nowrap;  /*设置不折行*/
    width:200px;  /*设置宽度*/
}

Demo

1
2
3
4
5
6
7
8
<!-- HTML -->

<ul id="demo1">
    <li>单行文本省略号</li>
    <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
    <li>Aliquam tincidunt mauris eu risus.</li>
    <li>Vestibulum auctor dapibus.</li>
</ul>
1
2
3
4
5
6
7
8
9
10
11
12
/* CSS */

#demo1 li {
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    width: 250px;

    margin-left: 12px;
    list-style: disc inside none;
}

注：因为设置了 li 的overflow为hidden，所以如果要设置其list-style，则需要设置为inside，而不是outside，不然将会看不见你设置的list-style效果

多行省略号

WebKit 内核浏览器

核心代码

1
2
3
4
5
6
.xxx {
    display:-webkit-box;
    -webkit-line-clamp:2;  /*行数*/
    -webkit-box-orient:vertical;
    overflow:hidden;
}

注：chrome 和移动端可用

Demo

1
2
3
4
5
<-- HTML -->

<p class="demo2">
    static：对象遵循常规流。top，right，bottom，left 等属性不会被应用。（CSS3）* CSS3 新增属性可能存在描述错误及变更，仅供参考，持续更新
</p>
1
2
3
4
5
6
7
8
.demo2 {
    width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

其他浏览器

目前没有什么 CSS 的属性可以直接控制多行文本的省略显示，比较靠谱的办法应该就是利用相对定位在最后面加上一个省略号了，代码参考下面：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.demo2 {
    position: relative;
    line-height: 1.5em;
    /* 高度为需要显示的行数*行高，比如这里我们显示两行，则为 3 */
    height: 3em;
    overflow: hidden;
}

.demo2:after {
    content: "...";
    position: absolute;
    bottom: 0;
    right: 0;
    padding: 0 5px;
    background-color: #fff;
}