css 超出两行省略 |css字体大小随页面变化

CSS中有一种非常实用的技术，即当一个元素中的文本内容超过两行时，将多余的内容省略，只显示前两行。这种技术可以减少页面的滚动条数量，让页面更加美观整洁。 实现这一效果需要使用CSS属性text-overflow。其中，text-overflow属性用于控制文本溢出时的行为，当属性值为ellipsis时，则表示使用省略号代替超出的文本。同时，为了让text-overflow属性生效，还需要设置white-space属性为nowrap，用于保证文本不换行。 以下是一段示例代码，用于实现超出两行省略的效果：

p {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
white-space: nowrap;
}

其中，-webkit-box-orient属性用于控制文本方向，将其设置为vertical表示垂直方向。-webkit-line-clamp属性用于指定要显示的行数，将其设置为2表示最多只显示两行。通过这些属性的组合，大家可以实现超出两行省略的效果。 需要注意的是，这种技术只适用于单行文本或者很短的文本，如果待省略的文本过长，则会出现省略号中断的情况，影响美观。此外，该技术也不适用于有图片或其他元素的情况，此时仍然需要滚动条进行显示。 总之，在适用的情况下，使用CSS的text-overflow属性实现超出两行省略效果是一种非常实用的技术，可以让页面更加美观整洁，提高用户的使用体验。