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

介绍

为了保证页面的整洁美观，有时候，页面当中文字过长的时候，需要使用 ... 来显示，代码如下：

单行文本溢出

对于单行文本，想要将溢出的文字用 ... 显示，可以设置 text-overflow: ellipsis 就可以得到解决，并且这个属性所有浏览器都支持，具体代码如下：

1. html:

  <div class="content">为了保证页面的整洁美观，有时候，文字内容太多，我们需要在一定宽度内显示文字，超出宽度的文字内容隐藏，并且显示省略号，div>

2. css:

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

3. 效果如下：
   

多行文本溢出

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

1. html:

  <div class="content">为了保证页面的整洁美观，有时候，文字内容太多，我们需要在一定宽度内显示文字，超出宽度的文字内容隐藏，并且显示省略号，div>

2. css:

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

3. 效果如下：