可以使用CSS的text-overflow属性和overflow属性来实现多行文本溢出显示省略号。

具体实现步骤如下:

  1. 设置文本容器的宽度和高度,并设置overflow属性为hidden,使得超出容器的文本被隐藏。

  2. 设置文本容器内的文本的display属性为inline-block,使得文本能够进行行内排列。

  3. 设置文本容器内的文本的white-space属性为nowrap,使得文本不会自动换行。

  4. 设置文本容器内的文本的text-overflow属性为ellipsis,表示文本超出容器时显示省略号。

  5. 设置文本容器内的文本的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,以实现多行文本溢出显示省略号的效果

不借助-webkit-box多行文本溢出显示省略号

原文地址: https://www.cveoy.top/t/topic/cIIi 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录