css text-overflow溢出文本显示省略号
<div style="width: 100px; overflow: hidden; text-overflow:ellipsis">
<nobr>当对象内文本溢出时显示省略标记</nobr></div>
语法:
text-overflow : clip | ellipsis
参数:
clip : 不显示省略标记(...),而是简单的裁切
(clip这个参数是不常用的!)
ellipsis : 当对象内文本溢出时显示省略标记(...)
说明:
设置或检索是否使用一个省略标记(...)标示对象内文本的溢出。
请您注意,text-overflow:ellipsis属性在FF中是没有效果的。
示例:
div { text-overflow : clip; }
text-overflow是一个比较特殊的样式,我们可以用它代替我们通常所用的标题截取函数,而且这样做对搜索引擎更加友好,如:标题文件有50个汉字,而我们的列表可能只有300px的宽度。如果用标题截取函数,则标题不是完整的,如果我们用CSS样式text-overflow:ellipsis,输出的标题是完整的,只是受容器大小的局限不显示出来罢了。
关于text-overflow属性如何应用,我们作如下的说明讲解:
text-overflow属性仅是注解,当文本溢出时是否显示省略标记。并不具备其它的样式属性定义。我们想要实现溢出时产生省略号的效果。还必须定义:强制文本在一行内显示(white-space:nowrap)及溢出内容为隐
css text-overflow溢出文本显示省略号的更多相关文章
- CSS 单行溢出文本显示省略号...的方法(兼容IE FF)(转)
http://www.52css.com/article.asp?id=602 =================================================== html ...
- css 溢出文本显示省略号
这个标题其实已经是一个老生常谈的问题了.很多时候,比如网站最基本的文章列表,标题会很长,而显示列表的区域宽度却没有这么宽,这时候最正常的做法就是 让超出宽度的部分文字用省略号(…)来表示.通常做法是网 ...
- 新公司入职第一天遇到的 关于 CSS 单行溢出文本显示省略号...的问题
上班第一天 前端岗位,因为公司这个项目是标准开发 所以没法用框架在打架页面,好吧 我手写 各种div 各种css样式 好不忧伤,好吧 不废话了 进入正题. 想在导航栏中的 客户信息 功能点 实现溢出用 ...
- 使用text-overflow:ellipsis对溢出文本显示省略号有两个好处
使用text-overflow:ellipsis对溢出文本显示省略号有两个好处,一是不用通过程序限定字数:二是有利于SEO.需要使用对对溢出文本显示省略号的通常是文章标题列表,这样处理对搜索引擎更友好 ...
- text-overflow:ellipsis ,溢出文本显示省略号
text-overflow:ellipsis 对溢出文本显示省略号有两个好处, 一是不用通过程序限定字数 二是有利于SEO. 需要使用对对溢出文本显示省略号的通常是文章标题列表,这样处理对搜索引擎更友 ...
- css溢出文本显示省略号
css div { width: 200px; height: 200px; border: 1px solid; /* 以下四条缺一不可 其中 display:block 为隐藏条件 */ disp ...
- 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 ...
- 使用 text-overflow: ellipsis溢出文本显示省略号时碰到的小问题
本人刚刚实习,第一次写东西,希望大家多多鼓励. 项目中需要实现标题超过一定长度以省略号的形式显示,不是什么难的问题.可是我不想用js实现,就百度了发现text-overflow: ellipsis;( ...
随机推荐
- android EditText输入变化事件详解
editText.addTextChangedListener(new TextWatcher(){ public void afterTextChanged(Editable s) { // ...
- chrome浏览器更新到chrome 29.0.1547.76 m,多出一些蛋疼的功能来。
更新到chrome 29.0.1547.76 m 的时候,莫名其妙多出一些蛋疼的功能来. 1.alert之类的弹出对话框样式变了,并且位置不是居中的,跑到了最上面去了,如下图. 要把这对话框改回原始状 ...
- 二、Socket之UDP异步传输文件
上一篇文章一.Socket之UDP异步传输文件中,实现了文件的基本传输,但是传输过程中的信息是看不到的,这一篇是对上一篇进行了一些改进,并且可以了解传输的信息(加入了Log),还加入了接收或者拒绝接收 ...
- 第十一章 Function类型
在ECMAScript中,Function(函数)类型实际上是对象.每个函数也是Function类型的实例,而且都与其它引用类型一样具有属性和方法.由于是函数对象,因此函数名实际上也是一个指向函数对象 ...
- Linux修改 DNS
前不久服务器上遇到一些问题,需要修改服务器的dns配置,写下来记下,笔者使用的说centos 6.5. DNS的配置文件在/etc/resolv.conf,但一般情况下修改后重启服务 service ...
- hdu 1040 As Easy As A+B
As Easy As A+B Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others) T ...
- js如何实现一定时间后去执行一个函数
js如何实现一定时间后去执行一个函数:在实际需要中可能需要规定在指定的时间之后再去执行一个函数以达成期望的目的,这也就是一个定时器效果,恰好在js中就已经给定了这样的一个函数setTimeout(), ...
- Java事务处理总结
http://lavasoft.blog.51cto.com/62575/53815/ 一.什么是Java事务 通常的观念认为,事务仅与数据库相关. 事务必须服从ISO/IEC所制定的ACID ...
- Android之Http网络编程(四)
前面几篇博文简单的介绍了一些常见的Http的操作,这些操作几乎都是在新开的线程中进行的网络请求,并在日志中打印出获取到的网络数据.那么,问题来了!(呃~感觉下一句是蓝翔有木有?)如何在把获取到的网络数 ...
- kettle JavaScript脚本
1.使用获取文件名步骤,获取本地一个目录下的所有 jpg 图片文件.通过java script 步骤,读取这些二进制文件的内容,放到一个字段里, 再通过表输出步骤把文件名字段和文件内容字段写入到数据库 ...