QQ 1640076782

2014年01月24日

使用text-overflow:属性时要注意的一个小问题

Filed under: 英语网站设计 — 标签:, , — lifengwu @ 7:56 上午

外贸购物网站的产品分类都比较丰富,而且分类名称也是长短不一,如果名称太长多数是自动换行,如果换行了就会带来一个问题,那就是整个分类看起来不整齐,有些客户并不喜欢这样,如果不换行,那就只能将超出的部分隐藏并显示省略号。这时候就要用到text-overflow这个属性。

但偏偏text-overflow 还只是ie的私有属性,没被收录到w3c标准里 .
text-overflow取值:
clip :默认值 。不显示省略标记,多余的部分直接隐藏.
ellipsis: 当对象内文本超出时显示省略标记…
可惜text-overflow 还只是ie的私有属性而已,也没被收录到w3c标准里 .
因此如果想让某个容器(div或者li或者…块级元素)显示一行文字,当文字内容过多时,不换行,而是出现省略号
css可以这样写:
.cate ul  li {width:175px;border-bottom:solid 1px #ddd;padding:2px 3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
值得注意的是overflow: hidden; text-overflow:ellipsis;white-space:nowrap;一定要一起使用,尤其是overflow: hidden; 这个一定不可以少,少了这个效果就会大不一样。

正常的:

少了 overflow: hidden; 的效果:

两个区别很明显,第一次使用的时候我以为是不需要这个属性的,调试了好半天才发现了这个错误。

还有就是要记得给对应的窗口定义一个宽度,不然也达不到我们想要的效果。

white-space:nowrap; 这个主要是强制控制文本不换行。