不借助-webkit-box多行文本溢出显示省略号
可以使用CSS的text-overflow属性和overflow属性来实现多行文本溢出显示省略号。
具体实现步骤如下:
-
设置文本容器的宽度和高度,并设置overflow属性为hidden,使得超出容器的文本被隐藏。
-
设置文本容器内的文本的display属性为inline-block,使得文本能够进行行内排列。
-
设置文本容器内的文本的white-space属性为nowrap,使得文本不会自动换行。
-
设置文本容器内的文本的text-overflow属性为ellipsis,表示文本超出容器时显示省略号。
-
设置文本容器内的文本的overflow属性为hidden,使得超出容器的文本被隐藏,同时也确保省略号能够正确显示。
下面是一个示例代码:
HTML代码:
<div class="text-container">
<p class="text">这是一段多行文本,如果超出了容器的宽度,那么就会显示省略号。</p>
</div>
CSS代码:
.text-container {
width: 200px;
height: 80px;
overflow: hidden;
}
.text {
display: inline-block;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
在上述示例代码中,text-container类表示文本容器,text类表示文本,其中文本容器的宽度为200px,高度为80px,超出容器的文本被隐藏。文本的display属性被设置为inline-block,white-space属性被设置为nowrap,text-overflow属性被设置为ellipsis,overflow属性被设置为hidden,以实现多行文本溢出显示省略号的效果
原文地址: https://www.cveoy.top/t/topic/cIIi 著作权归作者所有。请勿转载和采集!