之前控制单行文本溢出用省略号代替的方法我都是使用js控制,有时候用js控制就显得不是很灵活,因为要计算字符数和容器宽度,比较麻烦。但是我发现CSS3的text-overflow属性后,感觉好像打开了新世界的大门~简单的几句代码就可以轻松控制单行文本溢出的情况,而且不需要担心兼容性问题。所有的主流浏览器包括IE都支持这个属性。
先列出语法:
text-overflow: clip|ellipsis|string;
clip 修剪文本。
ellipsis 显示省略符号来代表被修剪的文本。
string 使用给定的字符串来代表被修剪的文本。
运用到具体元素中时,完整的语句是酱紫的:
.yourElement{
width:100px;
overflow:hidden;