CSS超过文字特定宽度用省略号替代和文字不换行

日期:2021-03-04 类型:科技新闻 

关键词:小程序如何制作,预约小程序,微信小程序怎么做,微信抽奖小程序,小程序外包

1般的文本断开(可用于内联与块):

CSS Code拷贝內容到剪贴板
  1. .text-overflow {   
  2.     display:block;/*内联目标需加 */  
  3.     width:31em;/* 何问起 hovertree.com */  
  4.     word-break:keep-all;/* 不换行 */  
  5.     whitewhite-space:nowrap;/* 不换行 */  
  6.     overflow:hidden;/* 內容超过宽度时掩藏超过一部分的內容 */  
  7.     text-overflow:ellipsis;/* 当目标内文字外溢时显示信息省略标识(...) ;需与overflow:hidden;1起应用。*/  
  8. }   

针对报表文本外溢的界定:
 
针对报表超过范畴显示信息省略号

CSS Code拷贝內容到剪贴板
  1. table{   
  2.      width:em;   
  3.      table-layout:fixed;/* 仅有界定了报表的合理布局优化算法为fixed,下面td的界定才可以起功效。 */  
  4.  }   
  5.  td{   
  6.     width:%;   
  7.     word-break:keep-all;/* 不换行 */  
  8.     whitewhite-space:nowrap;/* 不换行 */  
  9.     overflow:hidden;/* 內容超过宽度时掩藏超过一部分的內容 */  
  10.     text-overflow:ellipsis;/* 当目标内文字外溢时显示信息省略标识(...) ;需与overflow:hidden;1起应用。*/  
  11. }   

必须你留意的是,这个CSS款式只对单行的文本的效,假如你想把它用在多行上,也仅有第1行有功效的。

这个写法仅有IE会有“...”,其它的访问器文字超过特定宽度时会掩藏。

以上所述是对于CSS超过文字特定宽度用省略号替代和文字不换行的有关详细介绍,期待对大伙儿有一定的协助,另外也十分谢谢大伙儿对脚本制作之家网站的适用!