CSS实现文本溢出自动截断

在web前端开发中,经常要处理的一种情况就是“文本溢出”。比较友好的处理方式是溢出的文本不显示,在末尾加上“…”。实现方式多种多样,可以直接后端程序截断,前端js截断或者CSS实现截断。下面介绍CSS截断的方法。

主要代码有三个属性组成,缺一不可:

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

下面是chrome下的效果:

注意:IE6必须指定宽度。大家可以查看在线演示效果。

另外需要指出的是,不同系统的不同浏览器(主要是IE)下,“…”会显示不同的效果(可以在不同浏览器查看在线演示)。而且对于文章类的网站,显示大量的“…”也是级差的效果,最佳的方法还是言简意赅的使用一定字数的副标题用于列表。



标签:

发表评论

电子邮件地址不会被公开。 必填项已用*标注

您可以使用这些HTML标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

无觅相关文章插件,快速提升流量