Osheep

时光不回头,当下最重要。

在HTML中文本过长自动出现省略号效果

在网页开发中,我们总会碰到 “中文本过长自动出现省略号效果”的需求,如果不借助css,我们一般只能通过后台代码截取,或者使用JavaScript来截取进行实习该效果。

下面,我们就来聊聊这个需求如果快速的用css来实现吧!

目标效果:

《在HTML中文本过长自动出现省略号效果》

 

实现的CSS效果:

《在HTML中文本过长自动出现省略号效果》

其中由红色线框圈起来的代码和主要代码

overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;

组合样式代码,轻松优雅的实现这个需求!

对于一般的div及li元素用上面的CSS即可实现超过宽度显示省略号,但对于table元素中的td,只用上面的CSS还不行,还需给table加上下面的CSS:

table {
    table-layout: fixed;
}

只有通过修改table的table-layout,使表格以固定表格布局,才能实现超过宽度显示省略号效果,不然表格中的td虽然没有换行,但表格会随着内容不断变宽。具体关于 CSS table-layout属性的解释,可以上W3school进行查询。

好了,今天的分享就到这里了,欢迎关注破晓博客(hpboys.com)。

点赞