How to display css beyond ellipses

In web design, we often encounter situations where text content is too long. At this time, text content exceeding a certain length needs to be omitted and displayed to avoid the interface layout being stretched and affecting the user experience. CSS provides a convenient display beyond ellipsis attribute that can help developers implement this function.

In CSS, display beyond the ellipsis is achieved through text overflow. When a piece of text exceeds the size of its container, you can set the text-overflow property to indicate the excess text with an ellipsis (...). Usually you need to specify the following three attributes:

1. white-space attribute: controls how the white space within the element is handled. You can set the value to nowrap, which means that the text is forced to be displayed without wrapping, because the ellipses usually appear in End of line.
2. overflow attribute: Controls how the element content is displayed when it overflows the element box. You can set the value to hidden or scroll, because only when the text in the container exceeds the size of the container, the display needs to be omitted.
3. text-overflow attribute: Indicates how the text is displayed after it exceeds the container. You can set the value to ellipsis, which means using an ellipsis (...).

For example:

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

This CSS code defines a container class .container. When the text content in the container exceeds the size of the container, an ellipsis (...) will be used. express. At the same time, because the white-space attribute is set to nowrap, the text will not wrap.

It should be noted that the display beyond the ellipsis is only effective on some specific elements, such as block-level elements and inline elements such as div, p, span, etc. For elements such as input boxes and buttons, you need to set specific attributes to achieve similar effects.

In actual development, in order to be compatible with different browsers, it is recommended to use the following two methods at the same time to achieve display beyond the ellipsis:

1. Use text-overflow:ellipsis; -webkit-box -orient: vertical; -webkit-line-clamp:n; implemented in conjunction with the CSS extended attribute -webkit-line-clamp of the WebKit core, where n is the specified number of lines. For example:

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

This CSS code limits the text content to two lines, and the excess content will be represented by ellipsis (...). It should be noted that the -webkit-line-clamp attribute is only valid for browsers with WebKit core (such as Chrome, Safari, etc.), and for other browsers, other attributes need to be used.

2. Use the pseudo element :before or :after combined with the content attribute to achieve this. For example:

.container {
  position: relative;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.container:after {
  content: "...";
  position: absolute;
  z-index: 2;
  bottom: 0;
  right: 0;
  background-color: #fff;
}

This CSS code uses the pseudo element: after to add an element with a white background color, and then uses the content attribute with the content "..." to achieve the ellipsis effect. It should be noted that in order to maintain the relative position of the pseudo element and the container, the position attribute of the container class needs to be set to relative.

In short, CSS beyond ellipsis display is a classic design technique that can improve the aesthetics and user experience of the interface. In actual development, it is necessary to select the appropriate method according to the specific situation and conduct compatibility testing to ensure that the effect achieved is in line with expectations.

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