Here is how to use CSS to implement single-line and multi-line text overflow containers with ellipses instead of overflow parts.
The CSS implementation method of displaying ellipsis when a single line of text overflows the container
/* Specifies to hide when the content overflows the element box (container) */ overflow: hidden; /* Specifies that an ellipsis appears when the text overflows the containing element (container) */ text-overflow: ellipsis; /* Specifies that the text in the paragraph does not wrap */ white-space: nowrap;
It should be noted that because the ellipsis is displayed when the text overflows the container, the container needs to have a fixed width.
In the above example, the following 85646464654495467417 hahaha are omitted as ellipsis.
Then we break down these properties and values one by one.
overflow
The overflow property specifies what happens when content overflows the element's box.
| value | describe |
|---|---|
| visible | Defaults. The content will not be trimmed and will be rendered outside the element box. |
| hidden | The content is trimmed and the rest of the content is invisible. |
| scroll | The content is trimmed, but the browser displays scroll bars to view the rest of the content. |
| auto | If the content is trimmed, the browser displays scroll bars to view the rest of the content. |
| inherit | Specifies that the value of the overflow attribute should be inherited from the parent element. IE does not support this value. |
Hidden is used here.
text-overflow
The text-overflow attribute specifies what happens when the text overflows the containing element.
| value | describe |
|---|---|
| clip | Defaults. Trim text. |
| ellipsis | Displays ellipses to represent trimmed text. |
| string | Use the given string to represent the trimmed text. |
The ellipsis used here is the focal point of displaying the ellipsis.
white-space
The white-space attribute specifies how to handle whitespace within an element.
| value | describe |
|---|---|
| normal | Defaults. Whitespace is ignored by browsers. |
| pre | White space is preserved by the browser. It behaves like the <pre> tag in HTML. |
| nowrap | The text does not wrap, the text continues on the same line until it encounters a <br> tag. |
| pre-wrap | Whitespace sequences are preserved, but line breaks occur normally. |
| pre-line | Combine whitespace sequences, but preserve newlines. |
| inherit | Specifies that the value of the white-space attribute should be inherited from the parent element, which is not supported by IE. |
Nowrap is used here.
The CSS implementation method of displaying ellipsis when multi-line text overflows the container
overflow: hidden; /* Used to limit the number of lines of text displayed in a block element. In order to achieve this effect, it needs to combine other WebKit properties, such as the following two */ -webkit-line-clamp: 3; /* Attributes that must be combined to display the object as an elastically scalable box model */ display: -webkit-box; /* Properties that must be combined to set or retrieve the arrangement of the child elements of the flex box object, here is vertical */ -webkit-box-orient: vertical;
Multi-line uses the CSS extension properties of Webkit, so it is only compatible with browsers with Webkie core, and it is basically useless in actual scenarios (I haven't used it, so I said that, I found it online, hee hee).
At the same time, these extended attributes are relatively new. I don’t know if there are any strange bugs (citric acid). One known problem is that ellipses will appear even if the last line of text does not exceed the line. Therefore, it is recommended to think of other compromise methods, such as modifying the page layout with other CSS properties or implementing it with JavaScript.
"Learn to be a man with an umbrella. If you don't protect others from the wind and rain, who will hold you high above your head."
Reprinted in: https://www.cnblogs.com/yanggb/p/11314036.html