CSS超出显示省略号

发布时间：2023-05-17

一、鼠标移入显示

在一些需要强调的地方，我们可以设置鼠标移入时显示全部内容，以避免省略号的出现。我们可以借助CSS中的 :hover 伪类来实现。例如，我们可以将一段长文字放在一个带有固定高度和 overflow 属性的容器中，然后在 :hover 时将 overflow 设为 visible 即可。

.content {
   height: 50px;
   overflow: hidden;
}
.content:hover {
   overflow: visible;
}

二、超出部分显示省略号

在某些情况下，我们可能希望超出部分显示省略号，这时可以使用 CSS 中的 text-overflow 属性。text-overflow 属性只有在元素内的内容超出容器大小时才会起作用。当设置为 ellipsis 时，它会用省略号代替超出部分的内容。

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

三、显示省略号

如果我们希望在元素的结尾显示省略号，我们可以使用 CSS 中的 ellipsis 属性，前提是要设置元素的宽度。

.content {
   width: 200px;
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
}

四、超出隐藏显示省略号

如果我们不想让内容以省略号的形式出现，而是希望完全隐藏超出的部分，也可以使用 CSS 中的 overflow:hidden 属性。这样，元素的大小就会限制内容，超出的部分就会被隐藏起来。

.content {
   width: 200px;
   overflow: hidden;
}

五、文字超出隐藏变省略号

如果我们希望多行文字超出隐藏时变成省略号，而不是完全隐藏，我们可以使用 CSS 中的 line-clamp 属性。这个属性需要和其他属性一起使用，如 display: -webkit-box、-webkit-box-orient、-webkit-line-clamp、overflow:hidden。

.content {
   display: -webkit-box;
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 2;
   overflow: hidden;
}

六、文本超出2行显示省略号

我们同样可以通过 line-clamp 属性限制行数，当我们要求元素中的文本在超过两行后显示省略号时，可以这样设置：

.content {
   display: -webkit-box;
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
   overflow: hidden;
}

七、超出文本省略显示

在一些设计要求中，我们希望文本超过一定宽度后仍然可以省略。我们可以使用 CSS 中的 white-space 和 text-overflow 属性来实现。white-space 属性用于定义元素内部空白的处理方式，而 text-overflow 属性用于定义文本溢出元素时的处理方式。

.content {
   width: 200px;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
}

八、两行超出省略号

当我们需要限制文字不超过两行时，如果超过两行需要以省略号代替，我们可以使用 CSS 中的 line-height 属性设置行高为文字大小的倍数，从而控制行数。

.content {
   display: -webkit-box;
   -webkit-box-orient: vertical;
   line-clamp: 2;
   line-height: 1.5;
   overflow: hidden;
}

九、内容超出三行省略号

当我们需要限制文字不超过三行时，超过三行需要以省略号代替，可以使用 CSS 中的 max-height、line-height 和 text-overflow 属性来实现。max-height 是设置元素高度的最大值，line-height 是设定每行文字的高度，text-overflow 用于定义超出文本的处理方式。

.content {
   display: -webkit-box;
   height: 3.6em;
   line-height: 1.2em;
   -webkit-line-clamp: 3;
   -webkit-box-orient: vertical;
   overflow: hidden;
   text-overflow: ellipsis;
}

十、超出一行显示省略号

当我们只需要将超出一行的部分用省略号代替，可以设置元素的宽度和 line-height 属性。

.content {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
   line-height: 20px;
   width: 200px;
}
推荐文章