使用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 ...
随机推荐
- 关于windows中的任务管理调度器
windows中的任务管理调度器 任务管理调度器大概就是给windows设置一个任务,同时还可以设置这个任务的执行时间,执行次数等. 这个任务管理调度器是公司培训同事在讲studio中的job可以在s ...
- WinForm控件小知识
1.DataGridView控件显示自定义表 //造个数据表 DataTable dt = new DataTable(); dt.Columns.Add("DEcode", Sy ...
- C#下利用封包、拆包原理解决Socket粘包、半包问题(新手篇)
介于网络上充斥着大量的含糊其辞的Socket初级教程,扰乱着新手的学习方向,我来扼要的教一下新手应该怎么合理的处理Socket这个玩意儿. 一般来说,教你C#下Socket编程的老师,很少会教你如何解 ...
- SQL SERVER中的逻辑读,预读和物理读
sqlserver:数据存储方式:最小单位是页,每一页8k,sqlserver 对页的读取是具有原子性,也就是说,要么读取完整一页,要么完全不读取,不会有中间状态,而页之间的数据组织结构是B树 但是每 ...
- Android更改桌面应用程序launcher的两种方式
http://blog.csdn.net/mdx20072419/article/details/9632779/ launcher,也就是android的桌面应用程序.下图是我正在使用的魅族手机的l ...
- 移动硬盘安装linux系统小记
由于某种原因,笔记本电脑不在身边,因教学需要必须进行电脑展示教学,所以就有了如下的做法,写下来也是为以后方便吧.-- 目前手头有移动硬盘,怎么样才能实现用移动硬盘进行教学呢?!!! 机房若干台机器都是 ...
- Oracle Varchar2长度 及 PHP 长度判断
oracle数据库相信大家都比较熟悉,数据库中有一种非常常用的数据类型:字符串型. 对应该类型,在oracle中有三种比较常用的类型:varchar2(byte).varchar2( ...
- iOS Core Animation学习总结(3)--动画的基本类型
一. CABasicAnimation (基础动画) 移位: CABasicAnimation *animation = [CABasicAnimation animation]; //keyPath ...
- [译]JavaScript 错误和处理
JavaScript的调试是一个噩梦:一些错误刚开始很难理解,并且给出的错误函数也经常是没用的.如果把错误都列出来并给出解决办法会不会很有用呢. 下面列出了JavaScript一系列的奇怪错误.对于同 ...
- CSS3几个速记标签2
@font-face:CSS3允许使用自己的字体,用户会自动下载 语法:@font-face{font-family:---:src:url(---)} 如果要使用粗体,必须新添加另一 ...