css---realize the effect of displaying ellipsis (...) when the text exceeds two lines

This can be achieved using properties in CSS text-overflowwith properties -webkit-line-clamp. Here's a common way:

.text-container {
    
    
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2; /* 设置最大显示行数 */
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
}

In the above example, .text-container is the class name of the container element that wraps the text content. By setting display: -webkit-box; and -webkit-line-clamp: 2;, we set the container element to display only two lines of text. When the text exceeds two lines, the overflow is hidden by text-overflow: ellipsis;showing an ellipsis.

Note that -webkit-line-clampis a non-standard CSS property that only works on WebKit browsers.
If you need to be compatible with other browsers, you can consider using JavaScript or other CSS techniques to achieve similar effects.

Guess you like

Origin blog.csdn.net/zyue_1217/article/details/131943864