如何用 CSS 将超出显示宽度的内容隐藏起来[转]

转于 http://www.codebit.cn/pub/html/xhtml_css/tip/text_overflow/

作者: CodeBit     来源: CodeBit.cn     时间: 2007-04-08 15:20:45

摘要: 在显示列表的时候，太长的标题默认会换行显示，而这样的显示方式往往会破坏我们原有的页面布局，如何在我们无法知道标题长度的情况下，将超出显示宽度的内容隐藏起来？一个常见的做法是用服务器端语言判断、截取，但是这样在以后需要显示更长的标题时就需要修改服务器端脚本。

这里介绍的是如何用 CSS 将超出显示宽度的内容隐藏起来，在 IE 下我们还可以添加一个省略号，来表示多余的字符已经截断，以后改版也更方便。

归类: (X)HTML/CSS,

关键词: text-overflow, overflow, CSS, 隐藏, 超出, white-space,

<script type="text/javascript"> </script><script src="http://pagead2.googlesyndication.com/pagead/show_ads.js" type="text/javascript"> </script>

在显示列表的时候，太长的标题默认会换行显示，而这样的显示方式往往会破坏我们原有的页面布局，如何在我们无法知道标题长度的情况下，将超出显示宽度的内容隐藏起来？一个常见的做法是用服务器端语言判断、截取，但是这样在以后需要显示更长的标题时就需要修改服务器端脚本。

这里介绍的是如何用 CSS 将超出显示宽度的内容隐藏起来，在 IE 下我们还可以添加一个省略号，来表示多余的字符已经截断，以后改版也更方便。 


--------------------------------------------------------------
点此浏览示例文件
--------------------------------------------------------------


CSS:

    
    

      
      

       
        
      
      

      
      

       
       <style type=
       
       "text/css"> 
      
      

      
      

       
       .textOverFlow 
       
       { 
      
      

      
      
    
       
       width:300px; 
      
      

      
      
    
       
       overflow:
       
       hidden;  
      
      

      
      

       
           text-
       
       overflow:ellipsis; 
      
      

      
      
    
       
       white-space:
       
       nowrap; 
      
      

      
      

       
           border
       
       :1px solid #ddd; 
      
      

      
      

       
       } 
      
      

      
      

       
       </style> 
      
      

      
      

       
        
      
      

HTML:

    
    

      
      

       
        
      
      

      
      

       
       <div class="textOverFlow"> 
      
      

      
      

       
           CodeBit.cn 聚合小段精华代码 CodeBit.cn 聚合小段精华代码 CodeBit.cn 聚合小段精华代码 CodeBit.cn 聚合小段精华代码 CodeBit.cn 聚合小段精华代码 CodeBit.cn 聚合小段精华代码 CodeBit.cn 聚合小段精华代码 CodeBit.cn 聚合小段精华代码 CodeBit.cn 聚合小段精华代码 CodeBit.cn 聚合小段精华代码 CodeBit.cn 聚合小段精华代码 CodeBit.cn 聚合小段精华代码 CodeBit.cn 聚合小段精华代码 CodeBit.cn 聚合小段精华代码 CodeBit.cn 聚合小段精华代码 CodeBit.cn 聚合小段精华代码 CodeBit.cn 聚合小段精华代码 CodeBit.cn 聚合小段精华代码 CodeBit.cn 聚合小段精华代码 CodeBit.cn 聚合小段精华代码 CodeBit.cn 聚合小段精华代码  
      
      

      
      

       
       </div> 
      
      

      
      

       
        
      
      

实现原理：

（1）指定宽度： width:300px;
（2） overflow:hidden;  将超出内容隐藏
（3） text-overflow:ellipsis; IE 专有属性，当对象内文本溢出时显示省略标记(...)
（4） white-space:nowrap; 强制在同一行内显示所有文本，直到文本结束或者遭遇 br 对象。