用CSS就能完美解决文字溢出的处理办法

用css就能完美解决文字溢出的处理办法
经常会在项目中碰到文字溢出的情况，解决起来也比较麻烦，而最大的麻烦还是在浏览器的兼容问题上。至少到目前为止，我还没找到用css就能完美解决文字溢出的办法。前几天就再次碰到这个问题，之后一查，发现和迅雷的一个页面重构的面试题惊奇的相似，仔细一想，也没啥巧合不巧合的，只能说这种情况太常见了。
要求是这样的：一个新闻列表，新闻标题后紧跟着日期，新闻标题的宽度超过一定的宽度就要自动截断，但是日期必须显示完整。
花了点时间研究了下，最终的效果对于浏览器的兼容不是很理想，但我觉得也是很不错了。
查看演示
看到这个要求，基本上就知道html的结构该怎么写了，一个有序列表(ol+li)：
<ol id="news-list">
<li><a href="#">毛毛猫系列漫画</a><span>2010-09-18</span></li>
<li><a href="#">一个网页设计需求方眼中的网页设计</a><span>2010-09-18</span></li>
<li><a href="#">如何应对骗稿的客户</a><span>2010-09-18</span></li>
<li><a href="#">平面设计师：一个涂有虚名的职业</a><span>2010-09-18</span></li>
<li><a href="#">站在十字路口的网站设计师</a><span>2010-09-18</span></li>
<li><a href="#">设计师请别把自己不当人。</a><span>2010-09-18</span></li>
<li><a href="#">什么样的包装才叫做有新意的包装呢？</a><span>2010-09-18</span></li>
<li><a href="#">寻隐活动寻找网页设计开发高手</a><span>2010-09-18</span></li>
<li><a href="#">求平面设计同行们的经验指引</a><span>2010-09-18</span></li>
</ol>
结构写好了，接下来写css样式部分了，在这里先重点介绍一个css属性：
text-overflow: ellipsis;
text-overflow就是定义文字溢出的时候，该如何截断文字，属性值是ellipsis的时候就是当对象内文本溢出的时候显示省略标记(…)，该属性支持ie6以上的版本ie7/8/9和除firefox以外的现代标准浏览器：chrome、safari。opera是个特例，但也有一个专门针对opera的属性：
-o-text-overflow: ellipsis;
好了，下面就是完整的css代码
view sourceprint?
<style type="text/css">
#news-list {
list-style:none;
width:156px; /注意这个宽度/
}
#news-list:after {
content:'';
display:block;
clear:both;
height:0px;
}
#news-list li {
clear:both; /清除li中的浮动/
}
#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; /opera的专用截断文字的属性/
background:none; /解决ie6的莫名高度bug，试试在ie6下去掉这个属性/
}
#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; /针对ie6使用相对定位/
}
</style>


浅谈一下英文网站的制作
如何利用不对称元素来使网站建设更灵活
SEO优化中哪些因素会对网站关键词排名优化不利？
手机网站建设需要考虑哪些要素？
html 网页模板代码！如何判断一个网页模板的质量高低？
建站长尾关键词优化细节知多少
幼教早教企业如何建设网站？
SEO网站运营的最大骗局，只因你太单纯