网站开发和ui的区别,秦皇岛属于哪个省哪个市的,建设明星网站的目的论文,创建免费论坛的10个网站文字超出部分显示省略号还是比较常用的一个效果,最近看到网上的一些方法亲自实践了一下,发现有些以前一些浏览器不能用的属性现在可以用了#xff0c;于是研究了一番#xff0c;现总结如下#xff1a; 我们先来看下HTML代码#xff1a; divpspan用… 文字超出部分显示省略号还是比较常用的一个效果,最近看到网上的一些方法亲自实践了一下,发现有些以前一些浏览器不能用的属性现在可以用了于是研究了一番现总结如下 我们先来看下HTML代码 divpspan用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
