当文字内容超出时，显示省略号

木木木华

已于 2023-02-22 15:09:20 修改

阅读量477

点赞数

分类专栏： css 文章标签：单行文字内容超出多行文字内容超出

于 2023-02-22 14:58:47 首次发布

本文链接：https://blog.csdn.net/catascdd/article/details/129162834

版权

css 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

项目中会遇到这么一种情况，就是当文字内容过长，超出某一部分区域时，会覆盖别的内容，所以需要设置，当文字内容超出某一部分区域时，显示省略号。

经常遇到的情况是表格中文字内容过长，这种情况一般是单行显示，还有一种是多行显示，分别说明：

1. 单行文字内容超出

代码如下：

// 引用：@extend %text-overflow;
%text-overflow {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

在标签样式中引用显示如下：

2. 多行文字内容超出

多行文字主要是在多行文本的最后一行显示省略号，代码如下：

// 引用：@extend %text-overflow-duo;
%text-overflow-duo {
  overflow: hidden;
  text-overflow: ellipsis;
  display:-webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2; // 这个表示文本的行数，这里设置有两行文本
  word-wrap: break-word; // 英文及数字的强制换行
}

在标签样式中引用显示如下：