文字显示省略号-优快云博客

本文介绍如何使用CSS来实现单行或多行文本的省略号效果，包括不同浏览器下的兼容性处理方案，并提供了具体的代码示例。

单行文字显示省略号：设置元素的宽度，然后用onbr标签里面放文字然后设置overflow为hidden然后设置text-overflow:ellipsis;

多行文字显示省略号：（移动端）

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

浏览器兼容：比较靠谱简单的做法就是设置相对定位的容器高度，用包含省略号(…)的元素模拟实现；

p {
    position:relative;
    line-height:1.4em;
    /* 3 times the line-height to show 3 lines */
    height:4.2em;
    overflow:hidden;
}
p::after {
    content:"...";
    font-weight:bold;
    position:absolute;
    bottom:0;
    right:0;
    padding:0 20px 1px 45px;
    background:url(http://www.css88.com/wp-content/uploads/2014/09/ellipsis_bg.png) repeat-y;
}

具体实现网址：http://www.css88.com/archives/5206

word-spacing（即字间隔）:
This    is    some    text.    This    is    some    text.

This is some text. This is some text.

letter-spacing （字符间距）:

T    h    i    s     i    s    h    e    a    d    e    r 4

转载于:https://www.cnblogs.com/yanaweb/p/5067695.html