overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
时间: 2024-05-24 11:10:55 浏览: 129
CSS ellipsis 与 padding 结合时的问题详解
These CSS properties work together to create a "text truncation" effect, where text that exceeds a certain number of lines is hidden and replaced with an ellipsis.
- `overflow: hidden;` ensures that any text that exceeds the specified height or width of an element is hidden from view.
- `display: -webkit-box;` sets the display type of the element to a "flex box" style, which allows for the use of the `-webkit-line-clamp` property.
- `-webkit-box-orient: vertical;` specifies that the flex box should be oriented vertically, stacking the child elements on top of each other.
- `-webkit-line-clamp: 2;` limits the number of text lines that can be displayed to 2, and any text that exceeds that limit is truncated and replaced with an ellipsis.
Note that the `-webkit` prefix is used for these properties because they are currently only supported in WebKit-based browsers (such as Safari and Chrome), and may not work in other browsers.
阅读全文