How to achieve the ellipsis effect beyond hiding in CSS

In web page layout, we often need to limit the width or height of certain elements. When the width or height exceeds the limit, how to display the text content is a very important thing. Usually, we can use the overflow:hidden attribute in CSS to limit the display of element content. However, when content is hidden, some important information may be omitted, which is unfriendly to users. Therefore, we need to use the CSS ellipsis option to let users know that the text content has been omitted.

Under normal circumstances, when the text content exceeds the limit, the default processing method of the browser is to truncate and hide the excess text. However, sometimes we need to display ellipses to tell the user that some content has been omitted. At this time, we can achieve this through the text-overflow property in CSS.

The CSS property text-overflow is used to specify how to display ellipses when text overflows the containing element. The text-overflow attribute has three values: clip, ellipsis and string.

1. The clip value indicates that when the text overflows, the content beyond the text is hidden and the ellipsis is not displayed.
2. The ellipsis value indicates that when the text overflows, the content beyond the text is hidden and an ellipsis is displayed at the end of the text. The
3. string value means that when the text overflows, hide the content beyond the text and display the given string at the end of the text. For example, you can set the value to "...", then three dots will be displayed at the end of the text, indicating that some content has been omitted.

The text-overflow attribute must be used together with the overflow:hidden and white-space:nowrap attributes. Among them, white-space:nowrap indicates that the text cannot be wrapped and can only be displayed in one line. overflow:hidden indicates that when the text overflows, the excess part will be hidden.

The following is an example. We set the width of a div element to 100px, the height to 50px, and the text content is super long text. When the text overflows, we use the text-overflow:ellipsis property in CSS to display the ellipsis:

<div class="text-overflow">这是一个超长的文本，它将会在这个div中被限制宽度和高度。</div>

.text-overflow {
  width: 100px;
  height: 50px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

In the above code, we limit the width and height of the element, and the part beyond the text will be hidden . At the same time, we set the text not to wrap and can be displayed in one line. Finally, we use the text-overflow:ellipsis attribute to display the ellipses.

Summary

CSS’s beyond-hide and ellipsis attributes are commonly used techniques in web page layout. They can effectively limit the width or height of elements and display ellipses when text overflows, allowing users to Be aware that some information has been omitted. The text-overflow attribute must be used together with the overflow:hidden and white-space:nowrap attributes to correctly implement the ellipsis display effect.

I hope this article is helpful to you, thank you for reading!

The above is the detailed content of How to achieve the ellipsis effect beyond hiding in CSS. For more information, please follow other related articles on the PHP Chinese website!