使用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. zTree默认选中指定节点并执行事件

    var treeObj = $.fn.zTree.getZTreeObj("treeDemo"); var node = treeObj.getNodeByParam(" ...

  2. windows7 图形界面远程 centos6.5

    一.首先确定centos已经安装了gnome,因为centos自身没有图形界面,别说远程图形界面方式访问了,就本地图像界面方式都不行 1.首先查看系统的运行级别以及是否安装了桌面环境    1.使用命 ...

  3. [记录]使用setTimeout实现不同时间进行切换文本的颜色

    开始使用的是setinterval(),但是setinterval()的time是固定的,假如我想改变time,就需要每次clearInterval()一次. 如: setInterval(funct ...

  4. JAXB - Annotations, Annotations for Enums: XmlEnum, XmlEnumValue

    An enum type is annotated with XmlEnum. It has an optional element value of type java.lang.Class whi ...

  5. 【HTML XHTML CSS基础教程(第6版)】笔记之CSS笔记(7~25章)

      第7章 CSS构造块   1.在样式表中添加注释 /*内容*/   2.CSS颜色 rgb(红,黄,蓝) 这三个参数可以用百分号:rgb(35%,0%,50%); 也可以用数字,如上代码就相当于r ...

  6. ASP实现用年月日时分秒和两位随机数字来作为上传文件名的函数

    Public Function GetNewFileName() dim ranNum dim dtNow dtNow=Now() randomize ranNum=int(90*rnd)+10 Ge ...

  7. 多个html编辑器在同一页面加载

    http://127.0.0.1:3750/test.aspx 下载:ckfinder,ckeditor编辑器 <script type="text/javascript" ...

  8. 数据读取器对象SqlDataReader与数据适配器对象SqlDataAdapter的使用

        一.数据读取器对象SqlDataReader的使用      如何执行有查询结果集的select语句. 1.SqlDataReader对象的作用:当包含select语句的SqlCommad对象 ...

  9. Java_JVM学习笔记(深入理解Java虚拟机)___重点

    http://chenzhou123520.iteye.com/category/196061 转载 JVM学习笔记(一):运行时数据区 JVM学习笔记(二):JVM中对象访问的两种方式 JVM学习笔 ...

  10. GetDeviceCaps() 参数

    GetDeviceCaps 检测设备指定信息 参数: #define DRIVERVERSION 0 /* 设备驱动版本 */ #define TECHNOLOGY 2 /* Device class ...