恒富网

　　经常会在项目中碰到文字溢出的情况，解决起来也比较麻烦，而最大的麻烦还是在浏览器的兼容问题上。至少到目前为止，我还没找到用CSS就能完美解决文 字溢出的办法。前几天就再次碰到这个问题，之后一查，发现和迅雷的一个页面重构的面试题惊奇的相似，仔细一想，也没啥巧合不巧合的，只能说这种情况太常见 了。

　　要求是这样的：一个新闻列表，新闻标题后紧跟着日期，新闻标题的宽度超过一定的宽度就要自动截断，但是日期必须显示完整。

　　花了点时间研究了下，最终的效果对于浏览器的兼容不是很理想，但我觉得也是很不错了。

　　查看演示

　　看到这个要求，基本上就知道HTML的结构该怎么写了，一个有序列表(ol+li)：

　　结构写好了，接下来写CSS样式部分了，在这里先重点介绍一个CSS属性：

　　text-overflow: ellipsis;

　　text-overflow就是定义文字溢出的时候，该如何截断文字，属性值是ellipsis的时候就是当对象内文本溢出的时候显示省略标记 (…)，该属性支持IE6以上的版本IE7/8/9和除Firefox以外的现代标准浏览器：Chrome、Safari。Opera是个特例，但也有一 个专门针对Opera的属性：

　　-o-text-overflow: ellipsis;

　　好了，下面就是完整的CSS代码

　　view sourceprint?

　　#news-list {

　　list-style:none;

　　width:156px;  

　　}

　　#news-list:after {

　　content:'';

　　display:block;

　　clear:both;

　　height:0px;

　　}

　　#news-list li {

　　clear:both;  

　　}

　　#news-list 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;  

　　background:none;  

　　}

　　#news-list li a:hover {

　　color:#000;

　　text-decoration:underline;

　　}

　　#news-list li span {

　　float:left;  

　　color:#666;

　　padding-left:10px;

　　margin-right:-99px;  

　　_position:relative;  

　　}