前端css文本超出隐藏或显示省略号的多种方式

css文本超出就隐藏并且显示省略号是在开发网页时很常见的需求，比如在列表或者页面展示中，当所展示的文本内容过长时，超出显示区域；再例如，当所展示的文本内容过长时，需要截取部分内容展示，剩下文字由省略号展示，并给出鼠标经过完整提示。下面从多个方面介绍实现方法：

1. css单行文本省略号

当文本内容超出一行时，可以使用以下css属性实现单行文本省略号

.text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

上述代码中，overflow: hidden 表示文本内容溢出时隐藏；text-overflow: ellipsis 表示以省略号代替超出部分；white-space: nowrap  表示强制在一行内显示，不允许自动换行。

2. css多行文本省略号

当文本内容超出一行时，需要多行展示内容，可以使用以下css属性事项多行文本省略号

.text{
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

3. 使用Element-UI中的el-Tooltip

<el-tooltip placement="top">
   <div slot="content">
     {{ item }}
   </div>
   <div class="icon-item">
     <span>{{ item }}</span>
   </div>
</el-tooltip>

上面代码中的 item 就是需要省略的文本内容以及是鼠标经过后所展示的完整内容

4. 使用js方法中的slice方法截取

<span>
    {{item.length > 4 ? item.slice(0,4) + '...' : item}}
</span>

上面代码中的item是整体内容，判断当前需要截取的值长度是否大于你想展示的数据位数，大于时就截取前4位(4位是我当前需要展示的数据位数，根据自身需求改变数字)，加上省略号，就可以转换为文本超出省略；等于和小于时还是取原有数据item值即可。