一、CSS超出显示省略号
当文本长度超过所在容器的宽度时，CSS提供了文本溢出隐藏属性来避免文本溢出容器。通过text-overflow属性来设置文本显示方式为省略号，具体有三个值：
<style>
.example1 {
width: 200px;
white-space: nowrap; /* 控制文本不换行 */
overflow: hidden;
text-overflow: ellipsis; /* 当文本溢出时，显示为省略号 */
}
</style>
<p class="example1">This is a very long text. This is a very long text. This is a very long text.</p>
上面代码中，当容器的宽度为200px时，如果文本长度超出该宽度，就会显示为省略号。
二、CSS超出部分显示省略号
如果要控制省略号的位置，可以通过max-lines属性来控制文本的行数。先设置下面的代码并注释相应部分：
<style>
.example2 {
width: 200px;
white-space: nowrap;
overflow: hidden;
display: -webkit-box; /* 将对象作为弹性伸缩盒子模型显示 */
-webkit-box-orient: vertical; /* 设置或检索伸缩盒对象的子元素的排列方式 */
}
/* .example2::after {
content: "...";
} */
.example2.overflow {
-webkit-line-clamp: 2; /* 显示几行文本 */
}
</style>
接着在<p>标签中添加.overflow类：
<p class="example2 overflow">This is a very long text. This is a very long text. This is a very long text. This is a very long text. This is a very long text. This is a very long text.</p>
上面的代码中，设置了两行文本显示，当文本长度超过两行时，就会显示为省略号。如果想要省略号在文本后面显示，只需要取消代码注释。
三、CSS超过三行展示省略号
如果要控制大于三行时才显示省略号，需要设置-webkit-line-clamp属性的值大于需要的行数。下面是相应的代码：
<style>
.example3 {
width: 200px;
white-space: nowrap;
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
}
.example3::after {
content: "..."; /* 省略号 */
}
.example3.overflow {
-webkit-line-clamp: 4; /* 显示几行文本 */
}
</style>
在<p>标签中添加.overflow类：
<p class="example3 overflow">This is a very long text. This is a very long text. This is a very long text. This is a very long text. This is a very long text. This is a very long text. This is a very long text. This is a very long text. This is a very long text. This is a very long text.</p>
四、CSS两行省略号
如果只想让两行文本显示省略号，可以使用max-height属性来实现，max-height的值是<line-height> * 2，其中line-height是文本所在容器的行高。下面是相应的代码：
<style>
.example4 {
width: 200px;
white-space: nowrap;
overflow: hidden;
max-height: 2.4em; /* 行高是1.2em，2行的高度就是2.4em */
text-overflow: ellipsis;
}
</style>
<p class="example4">This is a very long text. This is a very long text. This is a very long text. This is a very long text. This is a very long text. This is a very long text. This is a very long text. This is a very long text. This is a very long text. This is a very long text.</p>
上面的代码中，设置了2.4em的最大高度，同时采用了text-overflow属性来实现省略号。
原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/300912.html
微信扫一扫 
支付宝扫一扫 