关于用css实现的文字超出部分显示省略号

文字超出部分显示省略号还是比较常用的一个效果,最近看到网上的一些方法亲自实践了一下,发现有些以前一些浏览器不能用的属性现在可以用了，于是研究了一番，现总结如下：

我们先来看下HTML代码：

<div><p><span>用css来实现当文字超出宽度时显示省略号的效果</span></p>
</div>

CSS代码：

div{width: 200px;
}span{display: block;width: 200px;overflow: hidden;white-space: nowrap;text-overflow:ellipsis;
}

我们可以看到其中可用到了text-overflow:ellipsis;网上说这是一个IE特有的属性，别的浏览器不支持，经过实践，现在chrome和火狐都已经支持了，

在chrome下的效果：

我的chrome版本号：

在火狐下的效果：

我的火狐版本号：

又说opera不支持text-overflow，针对Opera的话得使用-o-text-overflow:ellipsis;欧朋浏览器还没有装所以无法实践，但通过网上查找已经找到答案，有博主说自己新版的欧朋已经支持这个属性了，看博客时间是2012年，看来也是早就支持了的。

而且CSS中的这些属性不能少，否则不能显示省略号。可以顺着这样的思路来，要把文本限制在一行(white-space:nowrap;（white-space属性声明建立布局过程中如何处理元素中空白符）),这一行有宽度(width)，有宽度就有超出的部分，将超出的部分隐藏起来(overflow:hidden;)，然后后面跟上省略号(text-overflow:ellipsis;)。

还有一种非常规的方法补省略号，要用到伪对象after,思路是一个标签作内容，再加一个标签作填补省略号用，并且加起来的宽度不能超过它们容器的宽度，否则就换行。

来看下CSS代码：

span{display: block;width: 200px;overflow: hidden;white-space: nowrap;}p{clear: both;}p span{float: left;max-width: 175px;}p:after{content: "...";}

这样能有省略号的效果，但会有小小的问题，我们一起来看下效果：

在chrome下和火狐下都是这样的效果，可见这样的方法并不完美。

并且使用text-overflow:ellipsis来显示省略号也有好处，可以不用限定字数，对SEO也比较友好，比如我们的标题使用这个属性，标题看起来被截取了，但搜索引擎搜索的时候还是按完整的标题搜索，因为标题实际上并没有被截取，只是没有显示完全而已。

当然这样控制的方法都有一个最大的不足就是只能控制一行，js可以控制多行，并且也不复杂，我们这里只是就事论事罢了。

此外说到SEO，最近正在看一本书叫《榨干百度谷歌》，改天看完把笔记整理出来。此书没有什么干货，感觉可以归于科普读物。

本次学习不仅学到知识，也再一次验证了那句话：实践出真知。不仅要多看，还要多写，多练，实践才是检验真理的唯一标准，因为IT技术发展迅速，不知道什么时候以前不能用的现在就可以用了，以前能用的现在就不能用了，让代码真正的在自己手上过一遍，这是作为程序员基本的一个节操。

转载于:https://www.cnblogs.com/purl135/p/4118712.html

关于用css实现的文字超出部分显示省略号相关推荐

html 文字超出部分,CSS控制文字超出部分显示省略号方法
我们经常会看到有些网站比较长的字符就会显示省略号了,实现这种效果有两个办法,一种利用程序截取字符,另一种利用css实现超出部分显示省略号,下面我来介绍第二种. 测试浏览器: IE6/7/8/9.ope ...
CSS文字超出部分显示省略号
一行内超出显示省略号 overflow:hidden; /*超出的部分隐藏起来*/ text-overflow:ellipsis;/*超出文本以省略号 */ white-space:nowrap;/* ...
新闻列表中，常用的文字超出后显示省略号..
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
css 文字超出部分显示省略号
设置table固定布局,否则自适应布局会不受控制 table{table-layout: fixed;} 单行文字 : overflow: hidden; text-overflow:ellipsis ...
css 文字超出隐藏显示省略号
单行文本 overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
文字超出三行显示省略号
如下: overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit- ...
css 文字超出三行展示省略号
文字超出三行显示省略号: <style type="text/css">div{width: 100px;overflow: hidden;text-overflow: ...
li 字多出了省略号_文字溢出自动显示省略号css方法 -
文字样式(Text Style)是一组可随图形保存的文字设置的集合,这些设置可包括字体设置以及特殊效果等.文字样式在不同的软件环境下显示的方式也会不一样.下面就来分享一下html中如何让文字竖排?总结 ...
css如何让文字不换行,css如何让文字不换行显示？
在CSS中,可以通过white-space属性来实现文字不换行显示:只要将white-space属性的值为nowrap就可强制文字不换行. white-space属性指定元素内的空白怎样处理.它有以下 ...

关于用css实现的文字超出部分显示省略号

关于用css实现的文字超出部分显示省略号相关推荐

最新文章

热门文章