CSS steps beyond displaying ellipses: 1. Hide the part of the text content that exceeds the container; 2. Ensure that the text can wrap correctly to adapt to the width or height of the container; 3. When the text content exceeds the container When the width or height is specified, the excess content will be hidden. You can add omissions at the end of the hidden part; 4. Use the width and height properties of CSS to set the width or height of the container.

#In CSS, when the text content exceeds the width or height of the container, you can use ellipsis to indicate that the text content is hidden. This effect is often used with long text or titles in containers such as tables, lists, and cards to save space and provide a better user experience. The following will introduce in detail how to use CSS to achieve effects beyond displaying ellipses.

1. Text overflow hiding

To achieve the effect beyond displaying ellipses, you first need to hide the part of the text content that exceeds the container. You can use the CSS overflow property to set the overflow behavior of the container. Commonly used attribute values ??are:

overflow: hidden;: Hide the excess content in the container;

overflow: scroll;: Display the scroll bar so that the user can view the excess content;

overflow: auto;: Display scroll bars as needed.

For example, if you want to hide text content that exceeds the width of the container, you can set the overflow-x attribute of the container to hidden. If you want to hide text content that exceeds the height of the container, you can set the overflow-y attribute of the container to hidden.

2. Text wrapping

After hiding the text content, you need to ensure that the text can wrap correctly to fit the width or height of the container. You can use the CSS white-space property to control how text wraps. Commonly used attribute values ??are:

white-space: nowrap;: prohibit text wrapping, all text content will be displayed in one line;

white-space: normal;: allow text wrapping, according to Automatic line wrapping is required;

white-space: pre;: Preserve spaces and line breaks in the text, but allow the text to wrap.

Normally, we need to wrap the text content to fit the width of the container, so we can set the white-space property of the container to normal.

3. Add ellipses

When the text content exceeds the width or height of the container, the excess content will be hidden. To remind the user, you can add an ellipsis at the end of the hidden section. You can use the CSS text-overflow property to achieve this effect. Commonly used attribute values ??are:

text-overflow: clip;: Hide the excess content and do not display the ellipses;

text-overflow: ellipsis;: Hide the excess content and display it Ellipsis.

In order to achieve the ellipsis effect, the text-overflow attribute of the container needs to be set to ellipsis.

4. Set the width or height

Finally, in order to hide the part of the text beyond the container and display the ellipsis, you need to set the width or height of the container. You can use the CSS width and height properties to set the width or height of a container.

To sum up, the steps to use CSS to achieve the effect of exceeding the display of ellipses are as follows:

Set the overflow-x or overflow-y attribute of the container to hidden to hide the excess of the text content section;

Set the container's white-space property to normal to allow text to wrap;

Set the container's text-overflow property to ellipsis to display ellipses;

Set the width or height of the container to ensure that the excess text content can be hidden.

The following is a sample code that demonstrates how to use CSS to achieve the effect of exceeding the display of ellipsis:

<style>
.container {
  width: 200px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
</style>
<div class="container">
  This is a long text that will be truncated with an ellipsis when it exceeds the container width.
</div>

The above is the method of using CSS to achieve the effect of exceeding the display of ellipsis. This effect can be easily achieved by setting the container's overflow behavior, text wrapping, ellipsis style, and the width or height of the container.

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