在web前端开发中，经常要处理的一种情况就是“文本溢出”。比较友好的处理方式是溢出的文本不显示，在末尾加上“…”。实现方式多种多样，可以直接后端程序截断，前端js截断或者css实现截断。下面介绍css截断的方法。
主要代码有三个属性组成，缺一不可：
overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
下面是chrome下的效果：
注意：IE6必须指定宽度。大家可以查看在线演示效果。
立即学习“前端免费学习笔记（深入）”；
另外需要指出的是，不同系统的不同浏览器（主要是IE）下，“…”会显示不同的效果（可以在不同浏览器查看在线演示）。而且对于文章类的网站，显示大量的“…”也是级差的效果，最佳的方法还是言简意赅的使用一定字数的副标题用于列表。
HTML怎么学习？HTML怎么入门？HTML在哪学？HTML怎么学才快？不用担心，这里为大家提供了HTML速学教程(入门课程)，有需要的小伙伴保存下载就能学习啦！
广告![ThinkPHP5快速开发企业站点[全程实录]](https://img.php.cn/upload/course/000/000/068/6253d918a3ce7278.png)
收藏
收藏
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
930
