css实现文本溢出显示省略号

摘要

实现当一段文本溢出包含它的元素时则显示省略号...的功能
值得注意的点:

• 文本需要单行显示
• 包含这段文本的元素需要是块级元素，也就是说可以设置宽高

实现

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

说明: 起到关键性作用的是text-overflow:ellipsis;，但是需要搭配overflow: hidden;white-space: nowrap;这两个属性同时使用才能生效。

总结

简单的三行css属性即可实现文本溢出时显示省略号的功能，但需要注意文本需要以块级元素来包裹，否则即使设置了该三个属性也不会有效果。

标签：省略号,text,元素,css,overflow,文本,溢出
来源： https://www.cnblogs.com/rainslight/p/16580372.html