CSS设置文本末行显示省略号...

 首先设置文本标签或文字所在标签的宽度 

 最主要是以下三点：

       ①white-space：nowrap;如果是中文需要设置行末不断行
       ②overflow：hidden;设置控件超出范围
       ③text-overflow：ellipsis;设置多余文本省略号显示
代码如下

 

<style type="text/css">
		ul li .num,ul li .zi{
			float: left;
		}
		ul li{

			list-style: none;
			width: 250px;
			height: 40px;
			line-height: 40px;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}
		ul .li1{
			background:#F4F4F4 ;
		}
		ul li .num{
			color: white;
			width: 22px;
			height: 22px;
			margin-top: 9px;
			margin-left: 18px;
			margin-right: 10px;
			text-align: center;
			line-height: 24px;
			background: #969696;
		}
		li:hover{
			color: red;
			text-decoration: underline;

		}
		li:hover .zi{
			color: red;
		}
		li:hover .num{
			color: white;
			background: red;
		}

		</style>

<ul>
			<li class="li1">
				<div class="num">1</div>
				陪伴,因为有你们
			</li>
			<li class="li2">
				<div class="num">2</div>
				互联网+专家曹磊：分享一二三四五六七
			</li>
			<li class="li1">
				<div class="num">3</div>
				【姚蔚七日谈】重汽玩的一二三四五六七
			</li>
			<li class="li2">
				<div class="num">4</div>
				【重磅回馈】中国重汽曼一二三四五六七
			</li>
			<li class="li1">
				<div class="num">5</div>
				互利共赢——中国重汽表一二三四五六七
			</li>
			<li class="li2">
				<div class="num">6</div>
				【推荐阅读】马纯济：走一二三四五六七
			</li>
			<li class="li1">
				<div class="num">7</div>
				【观点】马纯济：重汽出一二三四五六七
			</li>

		</ul>

 

 

null