Jul 30

用CSS截断过长数据

Posted inProgram by ceil

总结了一下大概有以下几种:

1.定宽截断

.demobox{
  width:200px;
  overflow:hidden;
  height:2em;
  line-height:2em;
  word-break:break-all;
  text-overflow:ellipsis; /* IE中截断后加上... */
  white-space:nowrap;     /* 不换行 */
}

效果:
css-cut-01
如果不考虑长字符串的情况那么只需要 overflow:hidden和height属性就可以了，把换行的数据都hidden掉，间接实现截断效果，嘿嘿。

PS: FF中去掉white-space:nowrap属性就不会出现截断半个中文字的情况了

2.自适应宽度截断

如果内容有长字符串或者是加了white-space:nowrap的话，那么是会把外部容器撑破的，于是就不能自适应宽度截断了。

这里我利用了一下table的table-layout:fixed来间接实现。table在fixed模式中,td(或th)不会因为里面内容的大小而改变大小。[Gmail和QQmail的邮件列表都是采用这种方法 :D]

先简单看一下效果：

css-cut-02
table用了fixed模式并且设置了width:100%,那么table以及td的宽度就只有200px了，溢出的内容用overflow:hidden隐藏掉，于是便实现了自适应宽度的截断效果。
当然这方法也是有弊端的，首先为了实现效果把html结构弄复杂了，其次是(看下图)
css-cut-03

截断的单元格与旁边的数据贴得太近了，并且padding-right是控制不了的。Gmail用了个十分懒的方法，在两个td中间塞多一个空白的td把两列数据分开，看起来会美观些。而QQmail是在次列td里面放置一个div元素，设置适当的margin把截断的数据撑开，让数据看起来不会连成一块。我决定塞个&nbsp进去好了，省事 :D

No Comments