单行、多行字段太长，用...表示

这个功能在前端开发中实在是太常见了，只要是一段文本的展示，常常都要做此处理，限制文本的长度，超出部分用...表示，这里提供一种解决方案，直接上css代码（一些浏览器可能不兼容）：

单行：

overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;

注意：作用的元素必须是块级元素，如果是span这种非块级元素，请添加一行 display:block;

多行:

overflow: hidden;
text-overflow: ellipsis;
display:-webkit-box;
-webkit-line-clamp:2; 
-webkit-box-orient:vertical;

 

 

简单案例： 

HTML ：

  <div>
    <!-- 单行 -->
    <div class="single">
      这是一段很长长长长长长长长长长长长长长长长长长长的文本
    </div>

    <!-- 多行 -->
    <div class="mul">
      这是一段很长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长的文本
    </div>
  </div>

CSS：

.single {
  border: 1px solid red;
  width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mul {
  margin-top: 20px;
  border: 1px solid red;
  width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}