[css超出部分省略号]CSS 解决文字溢出与截断的问题

更新时间：2017-08-06 来源：flex 手机版 字体：大中小

【www.bbyears.com--flex】

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

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type="text/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;  /*给标准<a href="http://www.bbyears.com/clist-122-1.html" target="_blank" class="keylink">浏览器</a>一个最大宽度*/
	height:24px;
	white-space:nowrap !important;  /*强制文字不换行(标准<a href="http://www.bbyears.com/clist-122-1.html" target="_blank" class="keylink">浏览器</a>)*/
	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">
    溢出的2012-05-30
    溢出的时候2012-05-31
    溢出的时候文字2012-06-01
    溢出的时候文字换行2012-06-02
    溢出的时候文字换行并配2012-06-03
    溢出的时候文字换行并配合上2012-06-04
    溢出的时候文字换行并配合上面的2012-06-05
    溢出的时候文字换行并配合上面的固定2012-06-06
    溢出的时候文字换行并配合上面的固定高度2012-06-07

</body>
</html>

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

本文来源：http://www.bbyears.com/flash/34633.html