[分享]css内容溢出用省略号表示

CSS提供了一个非常有用的属性，可以在内容过长时，用省略号来表示。这个属性就是textoverflow。textoverflow:ellipsis; 上述代码可以让内容过长时，自动用省略号表示。如果你...

CSS提供了一个非常有用的属性，可以在内容过长时，用省略号来表示。这个属性就是text-overflow。

text-overflow:ellipsis; 

上述代码可以让内容过长时，自动用省略号表示。如果你希望只在一行上进行省略号的表示，那么可以再加上一个white-space属性，如下所示：

white-space:nowrap;
text-overflow:ellipsis; 

这样，无论内容有多长，只要一行放不下了，就会自动用省略号表示了。值得注意的是，这个属性只能应用于一些容器，如div，p等，而不能应用于button等表单元素。

同时，如果你希望内容过少时，也不要出现省略号，那么可以再加上一个overflow:hidden属性，如下所示：

white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis; 

这样，只有当内容超出容器宽度时，才会用省略号来表示。如果内容没有超过容器宽度，那么就会全部显示。

需要注意的是，如果你使用了这个属性，那么在设置宽度时，要留出足够的空间来显示省略号，否则就会显示不全。另外，该属性在不同浏览器中的表现会有所不同，需要进行兼容性测试。