li内文字超出隐藏，不允许出现半汉字截断，超出后仍显示new图片，小于宽度自动跟随...

效果，li内文字超出隐藏，不允许出现半个汉字，超出后仍显示new图片，小于宽度自动跟随,

div代码：
  <div class="contenta_news">
   <h2><a href="market?marketType=0"><img width="287" height="30" border="0" src="images/home_mlks.jpg"></a></h2>
   <ul>
   <li><a title="1.7《每日经济新闻》引用北京美联市场研究部观点" href="">·<span class="STYLE_ts2">1.7《每日经济新闻》引用北京美联市场研究部观点</span></a>< em><img src="images/new.gif"></em></li>
   <li><a title="1.4“新浪二手房”发文引用北京美联观点" href="">·<span class="STYLE_ts2">1.4“新浪二手房”发文引用北京美联</span></a><em& gt;<img src="images/new.gif"></em></li>
   <li><a title="12.30《每日经济新闻》引用北京美联市场研究部观点" href="">·<span class="STYLE_ts2">12.30《每日经济新闻》引用北京美《每日经济新闻》引用北京美</span><em& gt;<img src="images/new.gif"></em></a></li>
   <li><a title="不受“限购”房价更低北京商改住楼盘大行其道" href="">·<span class="STYLE_ts2">不受“限购”房价更低北京商改住楼盘大</span></a></li& gt;
   <li><a title="12.29《信报》引用北京美联观点" href="">·<span class="STYLE_ts2">12.29《信报》引用北京美联观点</span></a></li>
   <li><a title="12.29《新报》引用北京美联观点" href="">·<span class="STYLE_ts2">12.29《新报》引用北京美联观点</span></a></li>
   <li><a title="12.29《成报》引用北京美联观点" href="">·<span class="STYLE_ts2">12.29《成报》引用北京美联观点</span></a></li>
   <li><a title="12.24《香港经济新闻》引用北京美联观点" href="">·<span class="STYLE_ts2">12.24《香港经济新闻》引用北京美</span></a></li& gt;
   <li><a title="12.22《新报》引用北京美联观点" href="">·<span class="STYLE_ts2">12.22《新报》引用北京美联观点</span></a></li>
   <li><a title="12.22《成报》引用北京美联观点" href="">·<span class="STYLE_ts2">12.22《成报》引用北京美联观点</span></a></li>
   </ul>
   </div>

 

css定义：

.contenta_news{width:288px;
margin-top:13px;float:left;}
.contenta_news h2{
width:292px;
height:30px;
margin-bottom:10px;}
.contenta_news ul{
width:292px;
height:150px;}
.contenta_news ul li{
width:22em;       /*不允许出现半汉字截断*/
height:20px;padding-right:18px;
line-height:20px;
white-space:nowrap;    /*强制不换行*/
overflow:hidden;            /*自动隐藏文字*/                                                                           
text-overflow: ellipsis;    /*文字隐藏后添加省略号*/
-o-text-overflow:ellipsis; /*适用于opera浏览器*/
white-space: pre; /* CSS 2.0 */
white-space: pre-wrap; /* CSS 2.1 */
white-space: pre-line; /* CSS 3.0 */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: -o-pre-wrap; /* Opera 7 */
white-space: -moz-pre-wrap; /* Mozilla */
white-space: -hp-pre-wrap; /* HP Printers */
word-wrap: break-word; /* IE 5+ */
position:relative;
}
.contenta_news ul li em{
position:absolute;
right:0px;top:0px;}
.contenta_news a,.contenta_news a:link,.contenta_news a:visited,.contenta_news a:hover{color:#000;display:block;}

转载于:https://www.cnblogs.com/pansly/archive/2011/12/12/2285021.html