overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
时间: 2024-05-29 21:12:10 浏览: 88
CSS ellipsis 与 padding 结合时的问题详解
These CSS properties are used for text truncation and displaying ellipsis (...) when the text overflows its container.
- `overflow: hidden;` hides any content that overflows the container.
- `display: -webkit-box;` sets the display property to a flexible box layout. This is a proprietary property for WebKit browsers (like Safari and Chrome) but is widely supported.
- `-webkit-box-orient: vertical;` sets the orientation of the flexible box to vertical. This means that the text will be displayed in a single column.
- `-webkit-line-clamp: 2;` sets the maximum number of lines that the text can occupy. In this case, it's set to 2. Any text that exceeds this limit will be truncated and an ellipsis will be displayed at the end of the last line.
Overall, these properties are useful for creating a neat and tidy layout for text-heavy content, such as blog post previews or product descriptions.
阅读全文