CSS样式设置超出宽度，省略号显示

单行文本溢出隐藏：

• overflow：hidden; 不显示超过对象尺寸的内容，就是把超出的部分隐藏了；
• text-overflow：ellipsis; 当文本对象溢出是显示…，当然也可是设置属性为 clip 不显示点点点；

• <div class="wrap">
    <div class="content">测试数据：css单行文本超出长度显示省略号--明天也要努力</div>
    <div class="content text-ellipsis">测试数据：css单行文本超出长度显示省略号--明天也要努力</div>
  </div>
  
  <style>
  .wrap{
    width: 200px;
    height: 200px;
  }
  .content{
    width: 100%;
    margin-top: 6px;
  }
  // 设置代码
  .text-ellipsis{
    overflow:hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    -o-text-overflow:ellipsis;
  }
  </style>

多行文本溢出隐藏：

• -webkit-line-clamp 用来限制在一个块元素显示的文本的行数,这是一个不规范的属性（unsupported WebKit property），它没有出现在 CSS 规范草案中；
• display: -webkit-box 将对象作为弹性伸缩盒子模型显示 ；
• -webkit-box-orient 设置或检索伸缩盒对象的子元素的排列方式 ；

• <div class="wrap">
    <div class="content">
      测试数据：css多行文本超出长度显示省略号，多行文本超出长度显示省略号--明天也要努力
    </div>
    <hr>
    <div class="content text-ellipsis">
      测试数据：css多行文本超出长度显示省略号，多行文本超出长度显示省略号--明天也要努力
    </div>
  </div>
  
  <style>
  .wrap{
    width: 200px;
    height: 300px;
  }
  .content{
    width: 100%;
  }
  // 设置代码
  .text-ellipsis{
    overflow:hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 3;
    display: -webkit-box;
    -webkit-box-orient: vertical;
  }
  </style>