使用text-overflow:ellipsis对溢出文本显示省略号有两个好处
使用text-overflow:ellipsis对溢出文本显示省略号有两个好处,一是不用通过程序限定字数;二是有利于SEO。需要使用对对溢出文本显示省略号的通常是文章标题列表,这样处理对搜索引擎更友好,因为标题实际上并未被截字,而是局限于宽度而未被显示而已。 通常的做法是这样的:
1.overflow:hidden;
2.text-overflow:ellipsis;
3.-o-text-overflow:ellipsis;
4.white-space:nowrap;
5.width:100%; 其中,overflow: hidden和white-space: nowrap都是必须的否则不会显示省略号;-o-text-overflow: ellipsis针对Opera;而宽度的设定主要是针对IE6; 该方法支持Internet Explorer, Safari, Chrome 和 Opera,但FF并不支持,不过可以通过Jquery来实现类似的效果。 下载这个Jquery插件:jQuery ellipsis plugin 调用方法:
1.$(document).ready(function() {
2. $('.ellipsis').ellipsis();
3.}
使用text-overflow:ellipsis对溢出文本显示省略号有两个好处的更多相关文章
- text-overflow:ellipsis ,溢出文本显示省略号
text-overflow:ellipsis 对溢出文本显示省略号有两个好处, 一是不用通过程序限定字数 二是有利于SEO. 需要使用对对溢出文本显示省略号的通常是文章标题列表,这样处理对搜索引擎更友 ...
- CSS 单行溢出文本显示省略号...的方法(兼容IE FF)(转)
http://www.52css.com/article.asp?id=602 =================================================== html ...
- css 溢出文本显示省略号
这个标题其实已经是一个老生常谈的问题了.很多时候,比如网站最基本的文章列表,标题会很长,而显示列表的区域宽度却没有这么宽,这时候最正常的做法就是 让超出宽度的部分文字用省略号(…)来表示.通常做法是网 ...
- 新公司入职第一天遇到的 关于 CSS 单行溢出文本显示省略号...的问题
上班第一天 前端岗位,因为公司这个项目是标准开发 所以没法用框架在打架页面,好吧 我手写 各种div 各种css样式 好不忧伤,好吧 不废话了 进入正题. 想在导航栏中的 客户信息 功能点 实现溢出用 ...
- css text-overflow溢出文本显示省略号
<div style="width: 100px; overflow: hidden; text-overflow:ellipsis"> <nobr>当对象 ...
- css溢出文本显示省略号
css div { width: 200px; height: 200px; border: 1px solid; /* 以下四条缺一不可 其中 display:block 为隐藏条件 */ disp ...
- 使用 text-overflow: ellipsis溢出文本显示省略号时碰到的小问题
本人刚刚实习,第一次写东西,希望大家多多鼓励. 项目中需要实现标题超过一定长度以省略号的形式显示,不是什么难的问题.可是我不想用js实现,就百度了发现text-overflow: ellipsis;( ...
- CSS基础:text-overflow:ellipsis溢出文本显示省略号的详细方法_CSS教程
4要素: width: 125px; //宽度必须 text-overflow: ellipsis/clip; //省略号或裁剪: white-space: nowrap;//强制内容在一行显示; ...
- (轉)CSS 单行溢出文本显示省略号...的方法(兼容IE FF)
轉自:http://www.cnblogs.com/hlz789456123/archive/2009/02/18/1392972.html html代码:<div><p>&l ...
随机推荐
- Centos 6.4 python 2.6 升级到 3.5.2
查看python的版本 #python -V Python 1.下载Python-2.5.2 #wget https://www.python.org/ftp/python/3.5.2/Python- ...
- 最小生成树------Kruskal算法
Kruskal最小生成树算法的概略描述:1 T=Φ:2 while(T的边少于n-1条) {3 从E中选取一条最小成本的边(v,w):4 从E中删去(v,w):5 if((v,w)在T中不生成环) { ...
- uiatuomator如何调试
博主较笨,在使用junit 和uiatuomator结合时不知道怎么调试,因为uiatuomator一直是push在手机上,而junit是需要代码运行的,那我该怎么办,现在发一下不知道是哪位大神写的代 ...
- 用fiddler工具做接口测试
接口测试的原理我理解很简单,是你发送数据,看返回数据是否正确,返回值类型是否正常,主要点是多种数据的,返回结果正常 和其他应用程序相同,java中需要知道你的参数,字段有哪些,我们就去给他造数据,而先 ...
- [记录]gulp compass
因为个人习惯用compass,所以gulp中,还是用compass进行编译scss文件. 1. 使用npm安装gulp-compass npm install gulp-compass --save- ...
- PHP 简易读取文件目录下的文件,生成css spirte图片
因为个人不是对PS熟悉,不清楚如何在PS中生成一张横向有序的spirte图片,使用了"css sprite V4.3"版本,生成的图片会出现压缩图片大小的情况,本想修改原作者开发的 ...
- 关于c#生成word。
需求:需要把数据做成这样的效果.一个页面展示一个r单子数据. object filename = ""; Object Nothing = System.Reflection.Mi ...
- ASP读取RSS
<% @language="VBScript"%> <% Function readrss(xmlseed) dim xmlDoc dim http Set ht ...
- [leetcode] 399. Evaluate Division
我是链接 看到这道题,2个点和一个权值,然后想到图,但是leetcode就是这样,没给数据范围,感觉写起来很费劲,然后就开始用图来做,添加边的时候,注意正向边和反向变,然后查询的时候,先判断2个点是否 ...
- bzoj1002:[FJOI2007]轮状病毒
思路:一道很裸的生成树计数问题,然而要高精度,而且听说直接行列式求值会被卡精度,所以可以模拟行列式求值的过程得到递推公式:f[i]=3*f[i-1]-f[i-2]+2,证明详见vfk博客: http: ...