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;
}

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!

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn