使用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 ...
随机推荐
- 关于SWT中的Combo类和List类
Combo类的谱系图: 一个Combo类的实例: Combo1.java public class Combo1 { public static void main(String[] args) { ...
- C#实现快速排序法
现在有数组{ 3, 6, 2, 1, 9, 5, 4, 7 }; 然后用快速排序法把他们排序 1.首先 ,取出3作为比较数据 2.从最右边往左边比较找到第一个比3小的数据,把3在数组中的位置赋值为那个 ...
- ACM——搜索(一)
南邮OJ——1108 搜索(一) 时间限制(普通/Java):3500MS/10500MS 运行内存限制:65536KByte总提交:1023 测试通过:367 ...
- Ajax的Get和Post的区别
Ajax的Get和Post的区别Get方式:用get方式可传送简单数据,但大小一般限制在1KB下,数据追加到url中发送(http的header传送),也就是说,浏览器将各个表单字段元素及其数据按照U ...
- 对象创建型模式------Singleton(单例模式)
地址:http://blog.csdn.net/wuzhekai1985/article/details/6665869.仅供自己参考学习. 单例模式:保证一个类仅有一个实例,并提供一个访问它的全局节 ...
- JAVA中REPLACE和REPLACEALL的区别(转)
replace和replaceAll是JAVA中常用的替换字符的方法,它们的区别是: 1)replace的参数是char和CharSequence,即可以支持字符的替换,也支持字符串的替换(Char ...
- JavaWeb_数据传输_原
本节目录: 1.如何从Servlet向JSP传送数据:(setAtrribute和getAtrribute) 2.jsp如何输入表达数据以及传数据到servlet(FormAction去向和Inpu ...
- 第一篇、C_高精度加法
简介: C语言中,整型占4字节,现在要计算两个100(假设)位以内的数想加,如果只是用整型去存储,明显就会越界.那么,我们有什么好的方法去完成这一操作呢? 1.用数组实现 数组中可以可以存储一定长度的 ...
- C#微信开发之旅--准备阶段
最近才开始学微信开发的相关内容,记录下,慢慢的养成习惯! 1.申请公众号: 公众号分为 订阅号 和 服务号.他们之前的区别可以点击这里查看 因为我们是测试的,所以可以直接申请测试帐号,就把所有的功能都 ...
- JavaScript基础-对象<1>
1.JavaScript内部对象属性和方法 (1)内置String对象 String 对象是JavaScript的核心对象之一. 创建一个sting对象: var a="this defin ...