使用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对溢出文本显示省略号有两个好处的更多相关文章

  1. text-overflow:ellipsis ,溢出文本显示省略号

    text-overflow:ellipsis 对溢出文本显示省略号有两个好处, 一是不用通过程序限定字数 二是有利于SEO. 需要使用对对溢出文本显示省略号的通常是文章标题列表,这样处理对搜索引擎更友 ...

  2. CSS 单行溢出文本显示省略号...的方法(兼容IE FF)(转)

    http://www.52css.com/article.asp?id=602 ===================================================     html ...

  3. css 溢出文本显示省略号

    这个标题其实已经是一个老生常谈的问题了.很多时候,比如网站最基本的文章列表,标题会很长,而显示列表的区域宽度却没有这么宽,这时候最正常的做法就是 让超出宽度的部分文字用省略号(…)来表示.通常做法是网 ...

  4. 新公司入职第一天遇到的 关于 CSS 单行溢出文本显示省略号...的问题

    上班第一天 前端岗位,因为公司这个项目是标准开发 所以没法用框架在打架页面,好吧 我手写 各种div 各种css样式 好不忧伤,好吧 不废话了 进入正题. 想在导航栏中的 客户信息 功能点 实现溢出用 ...

  5. css text-overflow溢出文本显示省略号

    <div style="width: 100px; overflow: hidden; text-overflow:ellipsis"> <nobr>当对象 ...

  6. css溢出文本显示省略号

    css div { width: 200px; height: 200px; border: 1px solid; /* 以下四条缺一不可 其中 display:block 为隐藏条件 */ disp ...

  7. 使用 text-overflow: ellipsis溢出文本显示省略号时碰到的小问题

    本人刚刚实习,第一次写东西,希望大家多多鼓励. 项目中需要实现标题超过一定长度以省略号的形式显示,不是什么难的问题.可是我不想用js实现,就百度了发现text-overflow: ellipsis;( ...

  8. CSS基础:text-overflow:ellipsis溢出文本显示省略号的详细方法_CSS教程

    4要素: width: 125px;  //宽度必须 text-overflow: ellipsis/clip; //省略号或裁剪: white-space: nowrap;//强制内容在一行显示; ...

  9. (轉)CSS 单行溢出文本显示省略号...的方法(兼容IE FF)

    轉自:http://www.cnblogs.com/hlz789456123/archive/2009/02/18/1392972.html html代码:<div><p>&l ...

随机推荐

  1. Windows2012中安装Nginx并创建为Windows服务

    安装Nginx 下载windows版nginx (http://nginx.org/download/nginx-1.10.0.zip),之后解压到需要放置的位置(D:\xampp\nginx) 将N ...

  2. Linux系统搭建负载均衡环境

    1:负载均衡的定义多台服务器组成一个集群,向外提供相同的服务,所有的请求经过apache服务器的分配,到各台tomcat服务器处理请求.另外还需实现session共享,如果有一台tomcat服务器宕机 ...

  3. Time complexity analysis of algorithms

    时间复杂性的计算一般而言,较小的问题所需要的运行时间通常要比较大的问题所需要的时间少.设一个程序P所占用的时间为T,则 T(P)=编译时间+运行时间. 编译时间与实例特征是无关的,且可假设一个编译过的 ...

  4. HTML5规范的本地存储

    在HTML5 中定义了两种本地存储的,Web Storage 和本地数据库 SQL Database . 用来检查判断浏览器是否支持 Web Storage if(window.localStorag ...

  5. Unity3D 之连按移动加速

    上代码: 效果是连续按W后,加速移动 为物体添加个拖拽效果,方便看运动轨迹. 将下面的脚本绑定到移动的物体上. 不过这里有一点很重要的需要去注意就是该方法不能放在 void FixedUpdate() ...

  6. 利用FSO取得BMP,JPG,PNG,GIF文件信息(大小,宽、高等)

    利用FSO取得BMP,JPG,PNG,GIF文件信息(大小,宽.高等) 程序代码 <% ':::BMP, GIF, JPG and PNG ':::This function gets a sp ...

  7. MySQL类型属性Unsigned与ZeroFill

    1. Unsigned 就是将数字类型无符号化. int的类型范围是-2147483648~2147483647, int unsigned的类型范围是0~4294967295 Unsigned也可能 ...

  8. PowerDesigner使用教程 —— 概念数据模型 (转)

    一.概念数据模型概述    概念数据模型也称信息模型,它以实体-联系(Entity-RelationShip,简称E-R)理论为基础,并对这一理论进行了扩充.它从用户的观点出发对信息进行建模,主要用于 ...

  9. Linq DataTable Group By 分组显示人员明细

    实现功能:       多个字段分组源码样例: 原始数据: 分组后的输出结果: 源代码: public static void PrintPersons() { //准备数据 DataTable dt ...

  10. this 关键字

    导读 本文将列举C#中this关键字的用途 1.this 含义 2.用this 关键字避免参数与字段的混淆 3.用this关键字串联构造器 4.索引器 6.Visitor 模式 this 含义 C# ...