纯CSS的方法解决文字溢出与截断的问题

纯CSS的方法解决文字溢出与截断的问题

在网站的首页或者边栏输出新闻条目的时候，经常会遇到文字溢出与截断的问题。这个问 题曾经困扰了我很久，最近又重新遇到，我本着“每天进步一点点”的态度，继续改进方法，查阅文章，几经测试，终于确定使用纯CSS的方法解决这个问题。关 于这个问题，我用编程的方式解决过，也用js攻克过，现在CSS的标准属性和各浏览器私有属性的发展给我们带来重新解决这一问题的机会，我这样做也算是一 种新的尝试吧。

假定我要实现一组新闻条目的输出，每个新闻标题后面附带有新闻发表的日期，日期要完整显示，但标题和日期的总长度超过一定数值就要截断标题。

先看看演示吧：http://www.threesnow.com/code/089/

看完演示，重点介绍一下CSS代码中用到的一个关键属性：text-overflow 。

text-overflow: ellipsis;

这个属性定义了当文字溢出的时候如何截断文字，属性值为 ellipsis 的时候就是当对象内文本溢出的时候显示省略标记(…)，该属性支持IE6以上的版本IE7/8/9和除Firefox以外的现代标准浏览 器：Chrome、Safari。对于Opera，有一个相应的私有属性：

-o-text-overflow: ellipsis;

新闻条目的结构，我是这样写的：

<ul id="news">
    <li><a href="#">溢出的</a><span>2012-05-30</span></li>
    <li><a href="#">溢出的时候</a><span>2012-05-31</span></li>
    <li><a href="#">溢出的时候文字</a><span>2012-06-01</span></li>
    <li><a href="#">溢出的时候文字换行</a><span>2012-06-02</span></li>
    <li><a href="#">溢出的时候文字换行并配</a><span>2012-06-03</span></li>
    <li><a href="#">溢出的时候文字换行并配合上</a><span>2012-06-04</span></li>
    <li><a href="#">溢出的时候文字换行并配合上面的</a><span>2012-06-05</span></li>
    <li><a href="#">溢出的时候文字换行并配合上面的固定</a><span>2012-06-06</span></li>
    <li><a href="#">溢出的时候文字换行并配合上面的固定高度</a><span>2012-06-07</span></li>
</ul>

下面是完整的CSS代码：

* {
    margin:0;
    padding:0;
}

#news {
    margin-top:100px;
    margin-left:100px;
    list-style:none;
    width:156px;  /*这个宽度可以深究一下，它是不包含日期长度的*/
}
#news:after {
    content:'';
    display:block;
    clear:both;
    height:0px;
}
#news li {
    clear:both;  /*清除li中的浮动*/
}
#news li a {
    float:left;  /*标题向左浮动*/
    color:#333;
    text-decoration:none;
    font-size:13px;
    max-width:156px;  /*给标准浏览器一个最大宽度*/
    height:24px;
    white-space:nowrap !important;  /*强制文字不换行(标准浏览器)*/
    white-space:normal;  /*溢出的时候文字换行，并配合上面的固定高度，对文字进行裁切*/
    overflow:hidden;
    text-overflow:ellipsis;  /*截断文字，显示省略号(...)*/
    -o-text-overflow:ellipsis;  /*Opera的专用截断文字的属性*/
    background:none;  /*解决IE6的莫名高度BUG，试试在IE6下去掉这个属性*/
}
#news li a:hover {
    color:#000;
    text-decoration:underline;
}
#news li span {
    float:left;  
    color:#666;
    padding-left:10px;
    margin-right:-99px; 
    _position:relative; 
}

我所说的以纯CSS的方法解决文字溢出与截断的问题基本上就是这样。

不过，这个方法有个不得不正视的问题，那就是对firefox的兼容性，如果哪位大侠有好的办法，请留言指教。