CSS实现文本超出范围隐藏的实例

<--!
   <!--热点话题-->
   <div class="hot_topic">
     <h4 class="f_s"><a href="/" style="color:#d20408;">人大代表建议屏蔽网络热词，你怎么看？</a></h4>
       <ul class="ul_list"><li><a href="/" >为防止学生沉溺网游全国代表</a></li>
        <li><a href="/" >到底是什么影响不好呢？是对</a></li>

        </ul>

        </div>  <div class="clear"></div>

    <div class="hot_topic">
        <h4 class="f_s"><a href="/" style="color:#d20408;">人大代表建议屏蔽网络热词，你怎么看？</a></h4>
    <ul class="ul_list"><li><a href="/" >为防止学生沉溺网游全国代表</a></li>
        <li><a href="/" >到底是什么影响不好呢？是对</a></li>

        </ul></div>  <div class="clear"></div>

    <div class="hot_topic" >
        <h4 class="f_s"><a href="/" style="color:#d20408;">人大代表建议屏蔽网络热词，你怎么看？</a></h4>
    <ul class="ul_list" ><li style="border:none;"><a href="/" >为防止学生沉溺网游全国代表</a></li>
        <li style="border:none;"><a href="/" >到底是什么影响不好呢？是对</a></li>

        </ul></div>
    </div>     <div class="clear"></div>
-->
 

<--!
/*热点话题*/
.hot_topic{width:358px;margin-left:5px;}

.ul_list{padding:10px 0px;}
.ul_list li {

   width:170px;    //同时也可以设置行高，根据需要而定
    float:left;
    padding:10px 0px;  //li 间距，也是为了美观
    margin-left:6px;

    line-height:200%;   //行高，这是为了美观
    padding:4px;
    text-indent:30px;   //首行缩进，li中也可以用哦^^
    list-style-type:none;
    list-style-position:inside;
    border-bottom:1px dashed #838383;
    overflow:hidden;                          //    text-overflow:hidden;
    white-space:nowrap;
 }
-->