CSS超出显示省略号

小蓝 • 2024-12-24 03:01 • 编程

一、鼠标移入显示

在一些需要强调的地方，我们可以设置鼠标移入时显示全部内容，以避免省略号的出现。我们可以借助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属性。这个属性需要和其他属性一起使用，如disply: -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;
}

原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/288917.html