text-overflow 文字 超出

该 属性 主要用来定义当 文字 超出元素限定范围内之后，为了防止 页面 混乱，对超出元素范围的 文字 做的 一个 处理。

1. 官网定义

text-overflow 属性 规定当文本溢出包含元素时发生的事情。

2. 解释

text-overflow 用于设置当 文字 内容 超过所在元素设定的范围时候的展示 效果 。

3. 语法

   .demo   { 
     text-overflow  :  clip|ellipsis|string ; 
 } 
 @H_ 419 _46@


 属性 值说明

 
  
 值 
 说明 
  
 
 
 clip 
 超出 内容 后裁剪 
 
 
 ellipsis 
  文字 溢出后使用在最后的结尾使用省略号 
 
 
 string 
 使用给定的字符串来代表被修剪的文本 
 
 
 


4. 兼容 

 
  
 IE 
 Edge 
 Firefox 
 Chrome 
 Safari 
 Opera 
 ios 
 android 
  
  
 all 
 all 
 all 
 all 
 all 
 all 
 all 
 all 
  
 


5. 实例 

 
  文字 超出后裁剪 内容  
 

    < div   class   =  " demo "   >  
    网css3 属性 教学 text-overflow。
   </ div  >  
 @H_ 419 _46@


   .demo   { 
     height  :  px ; 
     width  :  px ; 
     overflow  :  hidden ; 
     white-space  :   Now rap ; 
     text-overflow  : clip  ; 
 } 
 @H_ 419 _46@


 效果 图


 



  文字 超出后裁剪 内容  效果 图 

 
  文字 超出元素后使用省略号。 
 

    < div   class   =  " demo "   >  
    网css3 属性 教学 text-overflow。
   </ div  >  
 @H_ 419 _46@


   .demo   { 
     height  :  px ; 
     width  :  px ; 
     overflow  :  hidden ; 
     white-space  :   Now rap ; 
     text-overflow  : ellipsis  ; 
 } 
 @H_ 419 _46@


 效果 图


 



  文字 超出元素后使用省略号 效果 图 

 
  文字 超出后使用  ！ 。 
 

    < div   class   =  " demo "   >  
    网css3 属性 教学 text-overflow。
   </ div  >  
 @H_ 419 _46@


   .demo   { 
     height  :  px ; 
     width  :  px ; 
     overflow  :  hidden ; 
     white-space  :   Now rap ; 
     text-overflow  :  "!"   ; 
 } 
 @H_ 419 _46@


 效果 图


 



  文字 超出后使用 `！` 效果 图 


说明：只在火狐浏览器兼容。


6. 经验 分享  


 text-overflow 这个 属性 常常用来限制 文字 超出后我们怎么去处理超出的这部分 文字 ，通常是隐藏掉，这样才不会破坏 页面 的视觉 效果 ，不会把 文字 堆积重叠到一起。


7. 小结 

 
 
 text-overflow 一定要和 overflow: hidden; 、 white-space:  Now rap;  一起使用，不能单独用。 
 这个 属性 通常是在有设置宽度和高度的元素使用。 
 

             
                text-shadow 文本阴影 ?  ?text-justify 对齐  
             
          

        

      
查看更多关于text-overflow 文字超出的详细内容...
        

          
声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://www.haodehen.cn/did92579