一、CSS超出显示省略号
CSS中的text-overflow属性可以控制当文本溢出容器时的显示行为。如果设置为ellipsis，就会在文本的末尾显示三个省略号。
.example1 {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
这个例子中，设置white-space属性为nowrap，让文本在一行内显示；设置overflow：hidden，超出的文本隐藏；最后设置text-overflow：ellipsis，让省略号显示在文本的末尾。
可以将.class-name也可以设置为*，表示该效果将应用于所有元素。
二、CSS超出隐藏
该效果可以通过给定元素设置max-width和overflow：hidden样式来实现。当元素的内容超出其宽度时，超出部分将隐藏。
.example2 {
max-width: 200px;
overflow: hidden;
}
这个例子中，设置容器的最大宽度为200px，超出的部分将被隐藏。
三、CSS超出部分显示省略号
在一些特定的设计场景下，可能不仅要在文本末尾显示省略号，还需要在其余省略号之前显示超出的部分。可以使用伪元素来实现这种效果。
.example3 {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.example3::before {
content: attr(title);
display: inline-block;
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
vertical-align: bottom;
white-space: nowrap;
}
这个例子中，通过设置.container::before的content属性，它显示了元素title属性的值。对于。例中的HTML元素
很长很长的一段文字，似乎超过了 .example3的宽度原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/179933.html
微信扫一扫 
支付宝扫一扫 