css省略号

css
  目录
  1. 1. css文本溢出省略号
    1. 1.1. 单行文本省略号
    2. 1.2. 多行文本溢出省略号
    3. 1.3. 兼容其它浏览器的写法

页面中文字溢出的省略号

css文本溢出省略号

单行文本省略号

1
2
3
4
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
// 有些浏览器需要加上width

多行文本溢出省略号

在WebKit浏览器或移动端（绝大部分是WebKit内核的浏览器）的页面实现比较简单，可以直接使用WebKit的CSS扩展属性(WebKit是私有属性)-webkit-line-clamp ；注意：这是一个 不规范的属性（unsupported WebKit property），它没有出现在 CSS 规范草案中。

-webkit-line-clamp用来限制在一个块元素显示的文本的行数。 为了实现该效果，它需要组合其他的WebKit属性。
常见结合属性：

  • display: -webkit-box; 必须结合的属性 ，将对象作为弹性伸缩盒子模型显示 。
  • -webkit-box-orient 必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式 。
  • text-overflow: ellipsis;，可以用来多行文本的情况下，用省略号“…”隐藏超出范围的文本 。
    1
    2
    3
    4
    5
    overflow : hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;

兼容其它浏览器的写法

html:

1
<p>WebKit Browsers will clamp the number of lines in this paragraph to 2. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

css:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
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://css88.b0.upaiyun.com/css88/2014/09/ellipsis_bg.png) repeat-y;
}

这里注意几点：

  • height高度最好是line-height的3倍；
  • 结束的省略号用了半透明的png做了减淡的效果，或者设置背景颜色；
  • IE6-7不显示content内容，所以要兼容IE6-7可以是在内容中加入一个标签，比如用…去模拟；
  • 要支持IE8，需要将::after替换成:after；
  样式