How to display excess parts of multiple lines as ellipses in css

When multiple lines of text appear in CSS, there is often a problem that the excess part cannot be displayed normally. At this time we can use ellipses to solve this problem.

The specific operation method is as follows:

1. First, you need to set a container with a limited width for the text, for example:

<div class="text-container">
  这是一段需要进行多行省略号处理的文本内容
</div>

2. Then, in Set the style of the text container in CSS, including width, font size, line height and other attributes:

.text-container {
  width: 300px;
  font-size: 16px;
  line-height: 1.5;
}

3. Next, we can achieve the ellipsis effect through the text-overflow attribute in CSS. This property has three values: clip, ellipsis and string. Among them, clip means not to display any ellipses, and string means to display the specified string as an ellipsis. When multiple lines of text are omitted, ellipsis is usually used to obtain the value. At the same time, we also need to set white-space to normal or normal-wrap to allow the text to wrap automatically after exceeding the width of the container.

.text-container {
  white-space: normal;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;  /* 控制行数 */
  -webkit-box-orient: vertical;
}

4. In the above code, we also use the -webkit-line-clamp and -webkit-box-orient properties to control the number and direction of text lines. Among them, the -webkit-line-clamp attribute is used to control the number of lines of text displayed. In this example, I set it to display up to 3 lines. The -webkit-box-orient attribute is used to define the arrangement of the child elements of a flexible box. Here I set it to vertical arrangement.

This completes the effect of CSS multi-line ellipsis. In general, the important thing to note is to set the width of the text container, and set the appropriate number of lines and ellipses style. At the same time, use the text-overflow attribute to control the ellipsis style of the excess part of the text to achieve better results.

The above is the detailed content of How to display excess parts of multiple lines as ellipses in css. For more information, please follow other related articles on the PHP Chinese website!