文本超出以...的形式展示

要控制文本超出的形式，最重要的属性是text-overflow。
我们来看一下W3C是怎么介绍这个属性的：

text-overflow 属性规定当文本溢出包含元素时发生的事情。

text-overflow 有三个属性值

• clip 文本超出的部分裁剪
• ellipsis 显示省略符号来代表被修剪的文本。
• 使用给定的字符串来代表被修剪的文本。
  我们使用的属性值主要是ellipsis

下面我们来实现单行文本和多行文本是如何超出以...的形式展示出来的。

控制文本在单行内超出以...的形式展示

css 代码

width: 100px;
white-space: nowrap;
overflow: hidden;
text-overflow: "ellipsis";

就是这么简单，首先控制文本元素的高度，其次控制文本元素要不换行，再让元素超出隐藏，最后使用text-overflow:ellipisis属性来控制超出以...的形式展示出来。

单行文本超出以...的形式

控制文本在多行内超出以...的形式展示

1、最简单的一种方式，但是只针对webkit浏览器和移动端的页面

  width: 100px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  border:1px solid #000;

2、兼容的方式

用伪元素模拟...来实现

p {
    width:200px;
    position:relative;
    line-height:20px;
    height:60px;
    overflow:hidden;
}
p::after {
    content:"...";
    font-weight:bold;
    position:absolute;
    bottom:0;
    right:0;
    padding:0 20px 1px 45px;
    background:url(http://newimg88.b0.upaiyun.com/newimg88/2014/09/ellipsis_bg.png) repeat-y;
}

多行文本超出以...的形式展示