How to achieve two lines beyond the ellipses in css

In CSS, sometimes you need to make an element display two or more lines of text, but you don't want all the text to be displayed. In this case, you can use the "two lines beyond the ellipsis" method.

In CSS, you can use the text-overflow and white-space properties to achieve this effect. text-overflow is used to set the style when the text exceeds the container, while white-space is used to control how the text is displayed without wrapping.

First, place the text that needs to be set to two lines in a fixed-width container, as in the following example:

<div>这是需要超过两行的文本内容</div>

Then, add the following style in CSS:

.container {
  width: 200px;       /* 容器宽度 */
  height: 48px;       /* 容器高度，即两行高度 */
  overflow: hidden;   /* 隐藏超出容器的文本 */
  text-overflow: ellipsis; /* 超出内容用省略号代替 */
  white-space: nowrap; /* 不换行 */
}

In this way, text content that exceeds two lines can be omitted in the form of "..." while keeping the height of the original two lines unchanged.

It is worth noting that text-overflow and white-space only work on the intercepted text, so if you want to set the style of the text in the container, you need to use other related attributes at the same time, such as font- size and line-height, etc.

In addition to two lines exceeding the ellipsis, CSS also provides a series of similar text exceeding truncation methods, such as single-line ellipsis, multi-line ellipsis, etc. Developers can choose and apply according to actual needs.

In general, CSS’s beyond ellipses method can help us make text content more beautiful and easier to read without taking up too much space.

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