在文本列表，缩略图等设计元素中，有时候文本的长度是不可控制的，而我们又不希望它自动折行，这时候，我们可能会希望浏览器把超长的文本变成省略号。传统方式是让后端或前Javascript直接把它裁到特定长度，但是这种方式只能写死字符数，排版、字号等变化时，不能忘了更新这个字符数，这样显然是非常笨拙的。
而CSS提供了另一种更好地选择：
.classname {
text-overflow:ellipsis; //溢出的文本变成省略号 *必须
overflow:hidden; // 不显示溢出的部分 *必须
width:100px; // 指定元素宽度 *必须
display:inline-block; // 当元素为行级元素时（如span标签），需加此，因为只有行内块才能指定宽度 视情况而定
white-space:no-wrap; //禁止自动折行 *必须
}
此外，有时还需实现鼠标移至内容区时将文本内容完整显示出来，此时只需在内容包裹标签内加上title属性，而title属性的值为文本内容即可。
扫描二维码关注公众号，回复：
9987875 查看本文章
