text-overflow:ellipsis的那点事儿

项目中关于文本溢出省略号显示的两种解决方案:

1、关于固定宽度的文本折行。

  主要样式:text-overflow: ellipsis; white-space: nowrap; overflow: hidden; 

  一定要指定固定宽度。

2、自适应布局(table)td中文本折行。

  需要给table加上一个样式: table-layout:fixed。

  保证每个td不会随着内容超出td宽度被撑开。

  比如给td设定: width:40%。 则需要在td中再多套一层块级元素,比如p,然后给p设置宽度,自适应td的宽度。

  p的样式:width: 100%; text-overflow: ellipsis; white-space: nowrap; overflow: hidden;

     

posted on 2013-07-31 17:28  摩帆士  阅读(630)  评论(0编辑  收藏  举报