CSS关于“文本超出范围隐藏”问题

 

 

老遇到的问题，缺乏总结，故今天总结，加强记忆。举例如下：

 

HTML 代码，

<--!

 

               <!--热点话题-->
     
    <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>

 

 

 

 

-->

 

 

 

CSS 代码，

 

<--!

 

/*热点话题*/
.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;
 }
-->

 

 

效果，

 

 

    首先，要设定文本的长度 width:170px;，还有超出后的处理方法 text-overflow:hidden，或者，text-overflow: ellipsis; 必须标明不可以换行 white-space:nowrap;

 

 

   补充，如果想实现list-style-type:square;这样的列表样式，一定要注意，就不能用overflow:hidden;它们是矛盾的，下篇详细说明这个问题。工作过程中如果遇到这样的问题，两者都必须的话，那就把overflow: hidden;改为 text-overflow: ellipsis;好了.