How to display ellipses beyond two lines in css

In CSS, the text-overflow attribute can be used to display the ellipsis effect when the text content exceeds the specified area, making the page more beautiful. The following is a detailed introduction:

1. text-overflow property

The text-overflow property in CSS is used to set what to do when the content of an element overflows its box. It has three common values:

• clip: Clip the text to fit the element width. Blocks the text behind the content and does not display the ellipses.
• ellipsis: Displays an ellipsis (...) to indicate clipped text.
• string: Change the ellipsis character to the specified string.

In the following example, we can see that when the text overflows the parent container, ellipses are used to abbreviate the content.

div {
  width: 150px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

The white-space attribute is used to specify how to handle blank spaces within the element, and nowrap means that the text will not wrap. The overflow attribute is used to specify how to handle when the element content overflows, and hidden means that the overflowed content is hidden.

2. Combined with the max-height attribute

When there is too much text in the element, you need to limit the number of lines of text display by setting the height. If you limit the height, then use text The -overflow attribute may find that the ellipsis still fails to appear.

The reason is that text-overflow only works on block-level elements with fixed width. Therefore, we need to combine the max-height attribute to solve this problem.

In the following example, we set the maximum height of the element to three lines. When the text exceeds three lines, use ellipses to abbreviate the content.

div {
  width: 150px;
  max-height: 3em;
  white-space: normal;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

Among them, the -webkit-line-clamp attribute is used to specify the number of text lines, while the -webkit-box-orient attribute is used to specify the text direction, and vertical indicates that the text is arranged vertically.

3. Combined with JavaScript

The above methods are all based on CSS style implementation. If you want to dynamically display the content of the article, you need to combine it with JavaScript.

Determine whether the ellipsis needs to be displayed by calculating the actual height of the element and the actual height of the content. The following is a simple example:

var element = document.querySelector('.element');
var contentHeight = element.scrollHeight;
var elementHeight = parseInt(getComputedStyle(element).height);

if (contentHeight > elementHeight) {
  element.addEventListener('click', function() {
    this.classList.toggle('expand');
  });
}

In this example, we first get the height of the element content and the actual height of the element. If the content height is greater than the element height, then add a click event to the element through CSS styles Show or hide text content.

4. Other Notes

   • The text-overflow property only applies to single-line elements or block-level elements with a defined width.
   • When using the text-overflow attribute, the white-space attribute should be nowrap.
   • When combined with the max-height attribute, the white-space attribute should be normal, and the -webkit-line-clamp attribute should be used to specify the number of lines.
   • Different browsers may have different support for the text-overflow attribute, so please use it with caution.

In general, using the text-overflow attribute can make the page more beautiful and better display the content of the article. Hope this article is helpful to you.

The above is the detailed content of How to display ellipses beyond two lines in css. For more information, please follow other related articles on the PHP Chinese website!