因为网页排版的需要,有些地方需要过长的问题加上省略号。比如:标题限制20个中文的宽度,超出的就用省略号代替。之前会使用程序截取的方法,不过使用css来截取更有利于SEO。

下面就介绍一下具体的使用方法

当对象内文本溢出时显示省略标记

复制代码

这是一个例子,其实我们只需要显示如下长度:

css实现网页中文字过长截取...

title class应该这样写:

.title{

width:300px;

white-space:nowrap;

overflow:hidden;

text-overflow:ellipsis;

}

复制代码

##说明:

1、 宽度一定要设置,可以根据实际需求调整。

2、white-space:nowrap是禁止文字折行。

3、text-overflow表示当文本溢出时是否显示省略标记,有两个值:

clip:不显示省略标记(...),而是简单的裁切。

ellipsis:当对象内文本溢出时显示省略标记(...)

复制代码

4、overflow:hidden表示溢出内容为隐藏。

示例代码:

Document

.test_demo_clip{

text-overflow:clip;

overflow:hidden;

white-space:nowrap;

width:200px;

background:#ccc;

}

.test_demo_ellipsis{

text-overflow:ellipsis;

overflow:hidden;

white-space:nowrap;

width:200px;

background:#ccc;

}

text-overflow : clip

不显示省略标记,而是简单的裁切条

text-overflow : ellipsis

当对象内文本溢出时显示省略标记

复制代码

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐