文字超长显示省略号总结

网上找到大部分说的是加上:

overflow: hidden; text-overflow: ellipsis; width: 100px; white-space: nowrap;

这个css,有些是专指table中的td,有些是指span。但是直接拿过来又好像不好用。所以我在这里总结一下。

1.在table的td中

在table要达到此目的,首先,table一定要设置它的样式:table-layout: fixed;然后再在指定的td上应用上面的样式。注意这里的width不一定有效,因为table-layout指定为fixed时,td的宽度只受第一行的对应列td的宽度影响。具体请参见w3c school:http://www.w3school.com.cn/css/prtabtable-layout.asp

2.在块级元素中

这里为什么说块级呢,因为在span,a这样的元素中是似乎是不生效的。除非你把它他们的display设置成block。那有没有办法在保留其内联特性的同时,又达到我们要的目的呢。是可以的,这时候inline-block就派上用场了。也就是,如果需要应用在a,span这样的内联元素上,就要额外加上

display:inline-block

这个css属性。注意:inline-block 这个css属性似乎也是有兼容性的,这里就不讨论它,详情请谷歌。