html文字超过部分显示为省略号

为了保证页面的整洁美观，有时候，页面当中文字过长的时候，需要使用 ... 来显示，代码如下：
对于单行文本
想要将溢出的文字用 ... 显示，可以设置 text-overflow: ellipsis 就可以得到解决，并且这个属性所有浏览器都支持，具体代码如下：

.txt {
    /*文本框宽度*/
    width: 300px;
    /* 强制不换行 */
    white-space: nowrap;
    /* 文字用省略号代替超出的部分 */
    text-overflow: ellipsis;
    /* 匀速溢出内容，隐藏 */
    overflow: hidden;   
  }

多行文本溢出
想要将溢出的文字用 ... 显示，需要使用到 WebKit的CSS扩展属性，不过该方法只适用于WebKit 浏览器及 移动端，具体代码如下：

.content {
    width: 300px;
    margin-top: 20px;
    border: 1px solid blue;
    /* 将对象作为弹性伸缩盒子模型显示 */
    display: -webkit-box;
    /* 设置或检索伸缩盒对象的子元素的排列方式 。 */
    -webkit-box-orient: vertical;
    /*  用来限制在一个块元素显示的文本的行数 */
    -webkit-line-clamp: 3;
    overflow: hidden;
    }