CSS截取字符串的方法

做过网站的人都知道我们经常会遇到一些栏目里的文字超出栏目宽度,这个时候怎么办呢?估计100%做程序设计的人都想到了,对!用left函数来截取字符就可以了。但是这个样子对SEO来说并不友好,下面编程之家介绍一种CSS截取字符串的方法。

如果你用left函数直接截取文字长度的话,那么超出去的部分是不显示了,但是在网页源文件里相应的文字也会因为你的left函数而断开!这个样子的设计对SEO优化来说是很不友好的!

编程之家下面介绍一种既能隐藏超出去的文字长度在源文件里又不断开文字的方法:

运用CSS的:text-overflow:ellipsis属性就可以实现,ellipsis表示当对象内文本溢出时显示省略标记(...)。可能有的朋友也用过这个属性但是并没有实现超出去的部分隐藏并显示(…)!这是为什么呢?

虽然 text-overflow属性注解说是可以的,但是真的想实现文本超出宽度显示省略标记必须配合另外2个CSS属性来使用,准确的写法应该是:还必须定义:强制文本在一行内显示(white-space:nowrap)及溢出内容为隐藏(overflow:hidden)。只有这样才能实现溢出文本显示省略号的效果。

下面是CSS截取字符串的代码:

CSS里只要写:#qdxw{width:300px; text-overflow:ellipsis; white-space:nowrap; overflow:hidden;}

特别说明:使用CSS截取字符串的时候,必须给当前标签添加宽度哦。

CSS里一个很简单但对SEO很实用的一个属性!现在大家学会了吧!

相关文章

Css常用的排序方式权重分配 排序方式: 1、按类型 ...
原文:https://www.cnblogs.com/wenruo/p/9732704.html 先上...
css属性:word-wrap:break-word; 与 word-break:break-all 的...
https://destiny001.gitee.io/color/
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML...
css之background的cover和contain的缩放背景图 对于这两个属...