這篇文章主要為大家展示了“CSS文本超出指定寬度后隱藏并顯示為省略號(hào)的示例分析”，內(nèi)容簡(jiǎn)而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“CSS文本超出指定寬度后隱藏并顯示為省略號(hào)的示例分析”這篇文章吧。

成都創(chuàng)新互聯(lián)公司專(zhuān)注于網(wǎng)站建設(shè)|成都網(wǎng)站維護(hù)|優(yōu)化|托管以及網(wǎng)絡(luò)推廣，積累了大量的網(wǎng)站設(shè)計(jì)與制作經(jīng)驗(yàn)，為許多企業(yè)提供了網(wǎng)站定制設(shè)計(jì)服務(wù)，案例作品覆蓋成都?jí)w彩繪等行業(yè)。能根據(jù)企業(yè)所處的行業(yè)與銷(xiāo)售的產(chǎn)品，結(jié)合品牌形象的塑造，量身策劃品質(zhì)網(wǎng)站。

一般的文字截?cái)啵ㄟm用于內(nèi)聯(lián)與塊）：

CSS Code復(fù)制內(nèi)容到剪貼板

.text-overflow {     
  
  display:block;/*內(nèi)聯(lián)對(duì)象需加*/      
  
  width:25em;     
  
  word-break:keep-all;/* 不換行 */      
  
  whitewhite-space:nowrap;/* 不換行 */     
  
  overflow:hidden;/* 內(nèi)容超出寬度時(shí)隱藏超出部分的內(nèi)容 */      
  
  text-overflow:ellipsis;/* 當(dāng)對(duì)象內(nèi)文本溢出時(shí)顯示省略標(biāo)記(...) ；需與overflow:hidden;一起使用。*/  
  
}

對(duì)于表格文字溢出的定義：

對(duì)于表格超出范圍顯示省略號(hào)

CSS Code復(fù)制內(nèi)容到剪貼板

table{     
  
   width:25em;     
  
   table-layout:fixed;/* 只有定義了表格的布局算法為fixed，下面td的定義才能起作用。 */  
  
}   
  
td{   
  
  width:100%;     
  
  word-break:keep-all;/* 不換行 */      
  
  whitewhite-space:nowrap;/* 不換行 */       
  
  overflow:hidden;/* 內(nèi)容超出寬度時(shí)隱藏超出部分的內(nèi)容 */  
  
  text-overflow:ellipsis;/* 當(dāng)對(duì)象內(nèi)文本溢出時(shí)顯示省略標(biāo)記(...) ；需與overflow:hidden;一起使用。*/  
  
}

代碼：

XML/HTML Code復(fù)制內(nèi)容到剪貼板

  
#div1{    
         padding: 10px;   
         width: 200px;   
         height:30px;   
         text-shadow: 3px 3px 3px #aaaaaa;   
         border: 1px solid #999999;   
         text-overflow: ellipsis;   
         overflow: hidden;   
         word-break: break-all;   
         white-space: nowrap;   
         }   
  
  
  
  
  
          AAAAAAAAAAAAABBBBBBBBBBBBBCCCCCCCCCCCCCCDDDDDDDDDDDD