想让溢出的文本变成....... 形成想要的效果
使用下面三个元素配合实现
overflow: hidden; 隐藏溢出的文本。
white-space:nowarp; 让文本不会自动换行 就可以让第一个属性去隐藏文本了
text-overflow:ellipsis; 让隐藏的文本变成....
overflow 的属性：
| visible | 默认值。内容不会被修剪，会呈现在元素框之外。 |
| hidden | 内容会被修剪，并且其余内容是不可见的。 |
| scroll | 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。 |
| auto | 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。 |
| inherit | 规定应该从父元素继承 overflow 属性的值。 |
white-space的属性
| normal | 默认。空白会被浏览器忽略。 |
| pre | 空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签。 |
| nowrap | 文本不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止。 |
| pre-wrap | 保留空白符序列，但是正常地进行换行。 |
| pre-line | 合并空白符序列，但是保留换行符。 |
| inherit | 规定应该从父元素继承 white-space 属性的值。 |
text-overflow的属性
| clip | 修剪文本。 | |
| ellipsis | 显示省略符号来代表被修剪的文本。 | |
| string | 使用给定的字符串来代表被修剪的文本。 |
版权声明：本文为RGSNbiubiubiu原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接和本声明。