A Deep Dive into Some CSS3 Tips Beyond Ellipses

The text-overflow property in CSS3 is a very useful feature that allows us to control how the text content of an element is displayed when it exceeds the size of its container. By default, text outside the container is replaced by ellipses (...). In this article, we’ll dive into some of the tricks and uses of CSS3 beyond the ellipsis.

Basic usage

First, let’s take a look at the basic usage of the text-overflow attribute. It has three optional values:

• clip: Clip the text beyond the container without displaying ellipses.
• ellipsis: Displays an ellipsis at the end of the container. (Default)
• string: Display the specified string at the end of the container.

Here is a simple example showing how to display an ellipsis at the end of a container:

div {
  width: 200px;
  white-space: nowrap; /* 防止文本换行 */
  overflow: hidden; /* 隐藏超出容器的文本 */
  text-overflow: ellipsis; /* 显示省略号 */
}

This will display a line of text in a 200 pixel wide div. When the text exceeds the container size, it is clipped and replaced with ellipses.

Use before or after pseudo-elements to add ellipses

Use the style attribute text-overflow to realize that the text exceeds the ellipses. Generally, the ellipsis is added at the end of the container. This solution is the simplest, but also the most common approach. If we want to make more highlights, then we need to think about more innovative approaches.

Using the CSS pseudo-element :before or :after can easily add an ellipsis. This method can usually achieve special effects (for example: left-aligned ellipsis text). By adding styles, we can control how the pseudo-element displays and override the display of the original text.

The following code demonstrates adding an ellipsis to the right of a container:

div {
  position: relative;
  width: 200px;
  white-space: nowrap;
  overflow: hidden;
}

div:before {
  content: "...";
  position: absolute;
  right: 0;
  top: 0;
  background-color: #fff;
  padding: 0 2px;
}

This will add an ellipsis to the right of the container. We placed the pseudo-element in the upper right corner of the container using absolute positioning and added a white background and some padding to it to ensure the ellipses were fully visible.

Use the CSS3 calc() function to control the available space for ellipses

The calc() function in CSS3 allows us to use mathematical expressions in CSS, which is very useful for dynamically calculating size or spacing. In excess of ellipses, we can use the calc() function to control the available space to ensure that the text and ellipsis can be displayed completely.

The following code demonstrates how to display text and ellipses in a container that is 300 pixels wide:

div {
  width: 300px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

div span {
  position: relative;
  display: inline-block;
  max-width: calc(100% - 20px); /* 容器宽度-省略号的宽度 */
  vertical-align: top;
}

div span:after {
  content: '...';
  position: absolute;
  right: 0;
  top: 0;
  width: 20px;
  height: 100%;
  text-align: center;
  background-color: #fff; /* 背景色和容器一致 */
}

In the above code, we use two key styles: the calc() function and span elements. The Span element is set to inline-block, which allows text to occupy a line by itself without affecting the rendering of other elements. Use the max-width attribute to set the maximum width of the span element to the width of the container minus the width of the ellipsis. This ensures that the text does not exceed the available space of the container.

Using CSS3 Flexbox

Flexbox layout in CSS3 is very useful, it allows us to create flexible and responsive layouts using CSS. When we need to display multiple lines of text in a container and want to add an ellipse to the last line, using Flexbox layout is a good choice.

The following code demonstrates how to use Flexbox layout to display multiple lines of text in a container that is 300 pixels wide and add an ellipsis on the last line:

div {
  display: flex;
  flex-direction: column;
  height: 80px;
  width: 300px;
  overflow: hidden;
}

div p {
  flex: 1;
  margin: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

div p:last-child {
  overflow: visible; /* 显示容器溢出的文本 */
  text-overflow: '';
  white-space: normal;
}

In the above code, we use There are three key style attributes: display: flex, flex-direction: column and flex: 1. The Flex container is set to flex-direction: column, so that the child elements are arranged vertically. Each paragraph element is set to flex: 1 to ensure that it takes up the full height of the container.

The last paragraph element is set to overflow: visible so that it overflows the container and displays all text. We also set the text-overflow property to an empty string so that it doesn't clip the text to ellipses. This way, the text in the last paragraph element will naturally overflow on the last line of the container, and Flexbox layout will automatically add the ellipsis to the last line.

Summary

In this article, we explored some techniques and uses of CSS3 beyond ellipses. In addition to the basic text-overflow property, we also demonstrate how to use pseudo-elements and the CSS3 calc() function to achieve more creative effects. We also covered how to use CSS3 Flexbox layout to display multiple lines of text and add ellipses. No matter which technology you use, make sure you use best practices when displaying text. This will ensure that the text renders well in a variety of contexts.

The above is the detailed content of A Deep Dive into Some CSS3 Tips Beyond Ellipses. For more information, please follow other related articles on the PHP Chinese website!