CSS实现文本溢出时的省略号显示效果

是一种常用的文字溢出处理方式,其实它的实现也很简单,只需要使用CSS的两个属性:

overflow和text-overflow

我们需要定义一个容器,将要溢出的文字放入其中:

<div class="container">
    这里是要溢出的文字
</div>

我们就可以使用CSS来实现文本溢出时的省略号显示效果:

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

其中,overflow属性用于指定容器的溢出处理方式,我们将其设置为hidden,表示隐藏超出容器的部分;text-overflow属性用于指定溢出的文本如何显示,我们将其设置为ellipsis,表示用省略号来表示溢出的文本;white-space属性用于指定文本的换行处理方式,我们将其设置为nowrap,表示禁止换行。

我们就可以看到,容器中的文字溢出时会被省略号替代,实现了文本溢出时的省略号显示效果。

本文链接:http://task.lmcjl.com/news/12850.html

展开阅读全文