How to use css to achieve the effect of exceeding the display ellipsis

Exceeding ellipsis in CSS refers to a way to display the text content in the form of an ellipsis through CSS property settings when the text within an element exceeds the width or height of its container.

Under normal circumstances, when the text overflows, the browser will automatically move the text to the next line for display. But in some cases, especially in mobile or responsive design, we want to display the text content in one line and display it in the form of ellipsis when the text exceeds the width of the container.

The beyond-omitted attribute in CSS can help us achieve this effect. Here are two commonly used overflow and omission attributes in CSS: text-overflow and white-space.

1. text-overflow

text-overflow is a new attribute of CSS3, which is used to set how to handle when text overflows the container. This attribute has the following values:

• clip: The text is truncated directly after it overflows the container.
• ellipsis: The text is displayed in the form of ellipsis after overflowing the container.
• string: Use the specified string to replace the default ellipsis when the text overflows the container.

When using text-overflow, you generally need to set overflow:hidden and white-space:nowrap to limit the content to be displayed in one line, as follows:

div {
    width: 200px;
    height: 30px;
    background-color: #f3f3f3;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

2. white-space

The white-space attribute is used to set how to handle whitespace characters (such as spaces, carriage returns, etc.) within the element. This attribute has the following values:

• normal: Default value, when there are multiple consecutive whitespace characters in an element, only one space is displayed.
• nowrap: Do not allow text to wrap, forcing text to be displayed on the same line.
• pre: Keep whitespace characters, and the text display is the same as the source file.
• pre-wrap: Keep whitespace characters and allow text to wrap.
• pre-line: Combine multiple consecutive whitespace characters and allow text to wrap.

When using the white-space attribute to achieve overflow omission, you need to set the value of white-space to nowrap and the value of overflow to hidden, as shown in the following code:

div {
    width: 200px; 
    height: 30px; 
    background-color: #f3f3f3; 
    text-overflow: ellipsis; 
    overflow: hidden; 
    white-space: nowrap; 
}

Need to pay attention to Unfortunately, using the white-space attribute will affect the display of text within the entire element, so it needs to be used in conjunction with the text-overflow attribute.

Summary

Using the text-overflow and white-space attributes in CSS can facilitate us to achieve the over-omission of text in some special cases. Of course, when applying it to actual projects, please make adjustments based on actual conditions.

The above is the detailed content of How to use css to achieve the effect of exceeding the display ellipsis. For more information, please follow other related articles on the PHP Chinese website!