text-overflow:ellipsis 当文本超出固定宽度时自动显示省略号的详细方法 -

text-overflow:ellipsis 当文本超出固定宽度时自动显示省略号的详细方法

作者：MJ 发布于：2012-8-23 10:23 Thursday 分类：Css

text-overflow:ellipsis 是 CSS中当文本超出固定宽度时自动显示省略号的样式属性，经常适用于控制文章标题的css样式中。

语法：text-overflow:ellipsis | clip

参数：

ellipsis : 当对象内文本溢出时显示省略标记（...）

clip : 不显示省略标记（...），而是简单的裁切

说明：

text-overflow:ellipsis 必须配合white-space:nowrap 和 overflow: hidden 这个两个属性同时使用才会有显示省略标记的小效果，如果只是单独使用或者只和这个两个属性其中的一个使用都是无法出现省略标记效果的。请看下面的实例对比，div1的是正常使用情况：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>MJBlog(mj.588cy.com)</title>
<style type="text/css">
.div1{width:250px; white-space:nowrap;text-overflow:ellipsis; -o-text-overflow:ellipsis; overflow: hidden; line-height:35px; height:35px; border-bottom:1px solid #999999; }
.div2{width:250px;text-overflow: ellipsis; -o-text-overflow:ellipsis; overflow: hidden; line-height:35px; height:35px; border-bottom:1px solid #999999; }
.div3{width:250px; white-space:nowrap;text-overflow:ellipsis; -o-text-overflow:ellipsis; line-height:35px; height:35px; border-bottom:1px solid #999999; }
.div4{width:250px;text-overflow:ellipsis; -o-text-overflow:ellipsis;line-height:35px; height:35px; border-bottom:1px solid #999999; }
</style>
</head>

<body>
<div class="div1">div1这个是新闻标题这个是新闻标题这个是新闻标题这个是新闻标题这个是新闻标题</div>
<div class="div2">div2这个是新闻标题这个是新闻标题这个是新闻标题这个是新闻标题这个是新闻标题</div>
<div class="div3">div3这个是新闻标题这个是新闻标题这个是新闻标题这个是新闻标题这个是新闻标题</div>
<div class="div4">div4这个是新闻标题这个是新闻标题这个是新闻标题这个是新闻标题这个是新闻标题</div>
</body>
</html>

« opacity 实现图层透明的CSS属性 | IE6下PNG图片透明的解决方法 (转来的)»

发表评论：

blogger
分类
- MJ分享(5)
- JQuery(23)
- Css(16)
- Html5(1)
- PHP(20)
- Seo优化(3)
最新碎语
- 佛曰：命由己造，相由心生，世间万物皆是化相，心不动，万物皆不动，心不变，万物皆不变。
  2012-10-24 02:01
- 佛曰：人生有八苦：生、老、病、死，爱别离，怨长久，求不得，放不下！
  2012-10-24 01:59
- 佛曰：笑着面对，不去埋怨。悠然，随心，随性，随缘。注定让一生改变的，只在百年后，那一朵花开的时间。
  2012-10-24 01:56
- 裤子尺码：腰围29（2.23尺/75-76cm）前档24-25cm 大腿48-50cm 小腿32-33cm 裤长95cm
  2012-10-17 15:49
- WEB前端工程师：我们是工程师中的设计师，是设计师中的工程师。
  2012-09-02 15:34
搜索
随机日志
链接

text-overflow:ellipsis 当文本超出固定宽度时自动显示省略号的详细方法

blogger

分类

最新碎语

搜索

随机日志

链接