CSS实现文本溢出自动截断_html/css_WEB-ITnose
程序员文章站
2022-03-30 13:33:35
...
在web前端开发中,经常要处理的一种情况就是“文本溢出”。比较友好的处理方式是溢出的文本不显示,在末尾加上“…”。实现方式多种多样,可以直接后端程序截断,前端js截断或者CSS实现截断。下面介绍CSS截断的方法。
主要代码有三个属性组成,缺一不可:
overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
下面是chrome下的效果:
注意:IE6必须指定宽度。大家可以查看在线演示效果。
另外需要指出的是,不同系统的不同浏览器(主要是IE)下,“…”会显示不同的效果(可以在不同浏览器查看在线演示)。而且对于文章类的网站,显示大量的“…”也是级差的效果,最佳的方法还是言简意赅的使用一定字数的副标题用于列表。
推荐阅读
-
css3实现的文本无法选中效果_html/css_WEB-ITnose
-
clear为什么能实现自动高度_html/css_WEB-ITnose
-
css实现的文本框focus获取焦点设置样式代码实例_html/css_WEB-ITnose
-
CSS如何实现禁止选中文本_html/css_WEB-ITnose
-
漂亮的圆角文本框 CSS3实现_html/css_WEB-ITnose
-
css文本自动换行_html/css_WEB-ITnose
-
css文本自动换行_html/css_WEB-ITnose
-
css 实现长英文或链接自动换行_html/css_WEB-ITnose
-
如何实现:上面的div根据内容自动高度,下面的div自动铺满剩余高度_html/css_WEB-ITnose
-
js实现打印之后打印窗体自动关闭_html/css_WEB-ITnose