使用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 ...
随机推荐
- Xilinx 网站资源导
Xilinx 网站资源导读 ———版权声明———–本文作者 Ricky Suwww.fpganotes.comrickysu.fpga@gmail.com 欢迎转载,转载请保持原样及署名商业使用须得到 ...
- Android MVP架构浅析
Android之MVC模式 MVC好处: 从用户的角度出发,用户可以根据自己的需求,选择自己合适的浏览数据的方式.比如说,对于一篇在线文档,用户可以选择以HTML网页的方式阅读,也可以选择以pdf的方 ...
- openvswitch安装和使用 --修订通用教程的一些错误
1.下载openvswitch源文件,注意版本要适合操作系统内核. 推荐openvswitch2.0及其以上版本. 2.开始安装openvswitch cd openvswitch sudo ./bo ...
- OI中神奇的神器fillchar
传说,Pascal中有一个函数——fillchar.这是高手们装*用的利器,也是大家的神器(大家好才是真的好). 神器介绍: 百度百科说:“Fillchar是Turbo/Borland Pascal的 ...
- Microsoft Excel Sheet/表格 制作折线图
Microsoft Excel Sheet/表格 制作折线图 虽然比较简单,但是仍然需要稍微花一点功夫. 1.制作好表格数据 2.先将数据选定(不包括 横座标的 年月日或其他的刻度 的那一列) 3.插 ...
- springmvc学习(五)——处理模型数据
Spring MVC 提供了以下几种途径输出模型数据: ModelAndView: 处理方法返回值类型为 ModelAndView 时, 方法体即可通过该对象添加模型数据Map 及 Model: 入参 ...
- Custom Action : dynamic link library
工具:VS2010, Installshield 2008 实现功能: 创建一个C++ win32 DLL的工程,MSI 工程需要调用这个DLL,并将Basic MSI工程中的两个参数,传递给DLL, ...
- 责任链模式(Chain of Responsibility Pattern)
责任链模式:可以为某个请求创建一个对象链.每个对象依序检查此请求,并对其处理,或者把它传给链中的下一个对象. 责任链上的对象负责处理请求,客户只需要将请求发送到责任链上即可,无需关心处理的细节和请求的 ...
- java 泛型 窜讲
一.为什么使用泛型 复用性:泛型的本质就是参数化类型,因而使用编写的泛型代码可以被许多不同类型的对象所复用. 安全性:在对类型Object引用的参数操作时,往往需要进行显式的强制类 ...
- 快速排序算法 Quick sort
作者:jostree 转载请注明出处 http://www.cnblogs.com/jostree/p/4046189.html 首先随机选择一个轴,并调整数组内各个数字,使得比轴值大的数在轴的右边, ...