CSS realizes the display of too long text is omitted

1. Single-line omitted display

In CSS, you can use the text-overflow property and white-space property to realize the omitted display of too long text. Here's how to do it:

1. Set overflow to hidden to hide text beyond the bounds of the container.

2. Set white-space to nowrap to force text to appear on the same line.

3. Set text-overflow to ellipsis to display ellipses.

code show as below:

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

This code is used when the width of the container is limited, the text beyond the width of the container will be hidden and an ellipsis will be displayed.

2. Multi-line omitted display

If you need to display multiple lines, you can set overflow to hidden, white-space to normal, and use the max-height attribute to limit the height of the container.

code show as below:

.ellipsis-multi-line {
   overflow: hidden;
   white-space: normal;
   text-overflow: ellipsis;
   max-height: 60px; /* 设置最大高度 */
}

In this code, when the height of the text content exceeds 60px, the excess will be hidden and an ellipsis will be displayed.