标题过长时则隐藏标题，日期完整显示

需求

如下图所示文章列表
设计稿

列表宽220px，单行高度20px；
日期紧随标题之后，距离标题10px；
标题过长时，隐藏标题，但日期必须显示完整；

方案

html

<ul class="list">
	<li><a href="#">前端工程师应该如何学习JS</a> <span class="date">2010-07-31</span></li>
	<li><a href="#">前端工程师的知识收集与管理</a> <span class="date">2010-06-26</span></li>
	<li><a href="#">分享你在开发中的经验</a> <span class="date">2010-05-29</span></li>
	<li><a href="#">前端开发团队现状调查和未来期望</a> <span class="date">2010-04-24</span></li>
	<li><a href="#">前端开发在研发流程中与其他岗位协作效率的提升</a> <span class="date">2010-03-27</span></li>
	<li><a href="#">页面重构合理化讨论</a> <span class="date">2010-01-30</span></li>
	<li><a href="#">页面重构合理化讨论</a> <span class="date">2009-12-26</span></li>
	<li><a href="#">css sprites应用</a> <span class="date">2009-11-28</span></li>
	<li><a href="#">网站重构中的文件组织</a> <span class="date">2009-10-31</span></li>
</ul>

css

.list {
	list-style: none;
	width: 220px;
	margin: 0;
	padding: 0;
	font: 12px/20px Arial;
}
.list li {
	height: 20px;
	overflow: hidden;
}
.list a {
	float: left;
	padding-right: 64px;
	color: #000;
	text-decoration: none;
}
.list a:hover {
	text-decoration: underline;
}
.list .date {
	float: left;
	margin-left: -54px;
	color: #ACACAC;
	font-size: 10px;
}

查看demo

分析

标题过长时隐藏标题，那么这里必定要用到overflow:hidden（内容溢出隐藏）。

上面html结构中的标题和日期都是inline元素，在列表宽度固定的情况下，标题过长时日期会紧随其后而转行，转行的文本会因li元素的overflow属性为hidden而被隐藏。但这里需要的只是隐藏过长的标题内容，而日期始终完整显示，所以日期不能随标题而转行。

怎样才能让日期紧随标题又不因标题过长而转行呢？

让日期（span）的元素框与标题（a）的元素框重叠，日期格式是固定的，其宽度也就确定了，为a元素定义一个padding-right值，再为span元素定义一个同等的margin-left负值，这样span元素就始终重叠于a元素的padding-right区域之上，不会受a元素内容的影响而转行了。当然这么做之前需要让a和span都浮动，因为它们默认都是inline元素，在没浮动时span元素还是会和a元素中转行的文本处于同一行框之中。

如不需考虑IE6的话，首先想到的自然是设置a元素的max-width属性，标题过长则隐藏就是要限制其最大宽度。