网页中标题过长，截断字符串为省略号

最新推荐文章于 2021-11-26 16:10:32 发布

原创最新推荐文章于 2021-11-26 16:10:32 发布 · 471 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #字符串截断 #省略号

web 同时被 3 个专栏收录

4 篇文章

订阅专栏

css

3 篇文章

订阅专栏

html

2 篇文章

订阅专栏

本文介绍如何使用CSS实现当标题过长时自动显示省略号的效果，以保持页面美观。通过设置宽度、隐藏溢出内容及使用text-overflow属性达到目的。

在设计网页文字列表时，常有碰到标题过长，需要显示截断部分文字，剩下用省略号代替的需求。如果我们采用js操作字符串，按字符个数来约束，遇到中英文混合时，各截取后的字符串长短不一，影响美观。
最简单做法是采用CSS来截取固定长度的字符串。写法如下：


.title-ellipsis{
  width:200px;/*调整这里的宽度*/
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
  text-overflow: ellipsis;/* IE/Safari */
  -ms-text-overflow: ellipsis;
  -o-text-overflow: ellipsis;/* Opera */
  -moz-binding: url("ellipsis.xml#ellipsis");/*FireFox*/
}