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

作者：简简单单 2012-06-08

提示：您可以先修改部分代码再运行

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type="text/<a href="http://www.111com.net/cssdiv/css.html" target="_blank">css</a>">
* {
	margin:0;
	padding:0;
}

#news {
	margin-top:100px;
	margin-left:100px;
	list-style:none;
	 /*这个宽度可以深究一下，它是不包含日期长度的*/
}
#news:after {
	content:'';
	display:block;
	clear:both;
	
}
#news li {
	clear:both; /*清除li中的浮动*/
}
#news li a {
	float:left; /*标题向左浮动*/
	color:#333;
	text-decoration:none;
	font-size:13px;
	max- /*给标准浏览器一个最大宽度*/
	
	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; 
}
</style>

<title>纯CSS的方法解决文字溢出与截断的问题</title>
</head>
<body>

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

</body>
</html>

</td>
	 </tr>
	</table>

提示：您可以先修改部分代码再运行

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

相关文章

精彩推荐