超长内容自动显示省略号

        在文本列表，缩略图等设计元素中，有时候文本的长度是不可控制的，而我们又不希望它自动折行，这时候，我们可能会希望浏览器把超长的文本变成省略号。传统方式是让后端或前Javascript直接把它裁到特定长度，但是这种方式只能写死字符数，排版、字号等变化时，不能忘了更新这个字符数，这样显然是非常笨拙的。

       而CSS提供了另一种更好地选择：

       .classname {

       text-overflow:ellipsis; //溢出的文本变成省略号 *必须

      overflow:hidden; // 不显示溢出的部分 *必须

      width:100px; // 指定元素宽度 *必须

      display:inline-block; // 当元素为行级元素时（如span标签），需加此，因为只有行内块才能指定宽度  视情况而定

      white-space:no-wrap; //禁止自动折行 *必须

}

 

此外，有时还需实现鼠标移至内容区时将文本内容完整显示出来，此时只需在内容包裹标签内加上title属性，而title属性的值为文本内容即可。