使用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 ...
随机推荐
- [记录] javascript 对象中使用setTimeout
参考:Javascript对象中关于setTimeout和setInterval的this介绍 使用最后一个方法终于弄好了,简直了,在对象中使用setTimeout原来是这样的 做的是分钟倒计时,倒数 ...
- 对css float 浮动的学习心得
css float浮动详解 @(css float)[hasLayout|clear float|妙瞳] css float的定义和用法 float 属性定义元素在哪个方向浮动.以往这个属性总应用于图 ...
- mvn常见命令
http://www.cnblogs.com/adolfmc/archive/2012/07/31/2616908.html 创建一个简单的Java工程:mvn archetype:create -D ...
- beanfactory与applicationcontext的区别
ApplicationContext能够自动辨认和应用在其上部署的实现了BeanFactoryPostProcessor的bean 特性 Bean ...
- 使用PHP连接、操纵Memcached的原理和教程
http://www.crazyant.net/1014.html Memcahced开源分布式内存对象缓存系统通过减少数据库的负担,从而能够加速你的web应用.在本文中我将解释怎样实现一个基于Mem ...
- MS SQLserver数据库安装
SQL2008的安装 1,双击打开setup安装文件 2,点击“全新安装或向现有安装添加功能” 3,安装程序支持规则,安装完之后,点击确定 4,输入产品的密钥,点击下一步 5,弹出“安装程序支持文件” ...
- iOS 隔离导航控制器
题外话:最近这两个月一直很闲,项目上基本没有啥大的需求.对于程序员来说,如果没有需求其实是一件很难受的事情,之前好多次在项目中没事找事,该优化的优化,该整理的整理.可能好多程序员都遇到过与我类似的情况 ...
- artice与section的区别
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
- 关于insertBefore
insertBefore,看名字就是在某个元素前插入元素,但是其实它可以再文档任何元素强势插入. insertBefore用法: parent.insertBefore(newChild, refCh ...
- 暑假集训(3)第三弹 -----Til the Cows Come Home(Poj2387)
题意梗概:据说母牛在产奶的时候,因为奶量太充足,希望有人帮它挤奶,它回家就很快.我们便能喝到鲜美的 牛奶,不过,贫奶季节却大不相同,它会懒洋洋的在大草原上晃来晃去的晒太阳,而不会想到马上回家,这可不 ...