How to Achieve Multiline Text Overflow with Ellipsis in CSS?-CSS Tutorial-php.cn

How to Achieve Multiline Text Overflow with Ellipsis in CSS?

Patricia Arquette

Release： 2024-12-03 09:38:11

Original

770 people have browsed it

How to Achieve Multiline Text Overflow with Ellipsis in CSS?

Multiline Text Overflow with Ellipsis

In CSS, the text-overflow property allows truncating text when it exceeds the designated area. However, by default, this truncation occurs on a single line. Sometimes, it is desirable to allow text to wrap on multiple lines while still indicating that there's more to be seen.

Achieving Multiline Overflow with Ellipsis

To achieve this effect, we can utilize the following CSS properties:

display: -webkit-box;: This property creates a flexible container that can accommodate multiple lines.
-webkit-line-clamp: 3;: Indicates the maximum number of lines allowed before the ellipsis appears (e.g., set to 3 for a three-line overflow).
-webkit-box-orient: vertical;: Ensures that lines stack vertically within the container.
overflow: hidden;: Hides any text that overflows the container's bounds.
text-overflow: ellipsis;: Adds the ellipsis (...) at the end of the last visible line.

Example Usage

div {
  width: 300px;
  height: 42px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

Copy after login

With these properties in place, text within the

element will wrap on multiple lines as needed. However, if the text exceeds the available space on the third line, it will be truncated and an ellipsis will appear at the end.

Note: These properties are only supported by WebKit-based browsers, including Chrome and Safari. Other browsers may require alternative solutions.

The above is the detailed content of How to Achieve Multiline Text Overflow with Ellipsis in CSS?. For more information, please follow other related articles on the PHP Chinese website!