码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2014-11-24 16:47:07      阅读:142      评论:0      收藏:0      [点我收藏+]

标签:style   blog   http   ar   color   使用   sp   on   div   

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

我们先来看下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下的效果:

bubuko.com,布布扣

我的chrome版本号:

bubuko.com,布布扣

在火狐下的效果:

bubuko.com,布布扣

我的火狐版本号:

bubuko.com,布布扣

又说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: "...";
            }

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

bubuko.com,布布扣

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

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

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

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

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

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

标签:style   blog   http   ar   color   使用   sp   on   div   

原文地址:http://www.cnblogs.com/purl135/p/4118712.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!