css text beyond ellipsis

The text beyond ellipsis technology in CSS makes long paragraphs of text more readable and also beautifies web pages. In this article, we’ll take a closer look at a few different forms of ellipsis and how to define them according to your needs.

1. Why use ellipses?

When text exceeds the width or height of its container in a website or application, text overflow truncation technology can be used to hide the excess and display an ellipsis at the end of the text. This technique makes the page cleaner and avoids clutter when text overflows.

2. How to use ellipses in CSS?

To use text overflow ellipsis in CSS, you need to use the following three attributes:

1. text-overflow attribute

text-overflow attribute is defined What happens when text overflows the container. By using this property, you can create and define the following text overflow types:

*clip: Truncate the overflowing portion of the text.

*ellipsis: Displays ellipses at the edge of the container where the text overflows.

2. white-space attribute

The white-space attribute is used to define how to handle whitespace in text, including spaces, newlines, etc. Usually we use the following three values:

*normal: No line breaks are forced, and the spaces between words are automatically adjusted.

*nowrap: Do not allow text to wrap.

*pre-wrap: Keep the text in a predetermined format. If there are spaces in the text, break the lines according to the spaces.

3. overflow property

The overflow property defines how content overflows inside its container. Normally we use the following two attributes:

*visible: allows content to overflow the container.

*hidden: The content is not allowed to overflow the container, and the excess part is cropped.

3. Several different ellipsis styles

1. Single-line ellipsis style

When there is only one line of text to be omitted, you can use the single-line ellipsis style:

.ellipsis{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

2. Multi-line ellipsis style

When the text to be omitted has multiple lines, you can use the multi-line ellipsis style:

.ellipsis{
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  white-space: normal;
  overflow: hidden;
  text-overflow: ellipsis;
}

3. Use ellipses when exceeding a certain number of characters

.ellipsis{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 200px;
}

4. Summary

By using the text-overflow, white-space and overflow properties of CSS, we can use several different ellipsis styles to create and define text overflow types. These include single-line ellipsis styles, multi-line ellipsis styles, and the use of ellipsis when a certain number of characters is exceeded. This technique can make the page tidier and avoid confusing page layout when text overflows.

The above is the detailed content of css text beyond ellipsis. For more information, please follow other related articles on the PHP Chinese website!