How to use css to display only one line if more than three lines are exceeded

css method to realize that only one line is displayed when more than three lines are exceeded: 1. Open the corresponding HTML file; 2. Set the css attribute for the text tag to ".text_singlerow {display:block;white-space:nowrap; overflow:hidden;text-overflow:ellipsis;}" can be displayed in a single line.

The operating environment of this tutorial: Windows 10 system, CSS3 version, DELL G3 computer

How to realize that css only displays more than three lines One line?

Line number control display when multi-line text is displayed in CSS

Sometimes it is necessary to display only one line, or two lines, or three lines of multi-line text content. line. At this time, you need to set relevant attributes in css. The code is as follows:

// 多行显示
.text_morerow {
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2; // 显示2行
    -webkit-box-orient: vertical;
    word-break: break-all; 
}
 
 
// 单行显示
.text_singlerow {
    display:block; /*这里设置inline-block或者block；根据使用情况来定（行内元素需要加这个，块级元素和行内块级可以不用）*/
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

It should be noted that assuming that only two lines are set to be displayed, the end of the second line will be displayed with an ellipsis. The third...N rows will still be displayed if the height of the label is high enough, so to control the display of the number of rows, in addition to setting the css style, you also need to combine the height setting of the label.

Recommended learning: "css video tutorial"

The above is the detailed content of How to use css to display only one line if more than three lines are exceeded. For more information, please follow other related articles on the PHP Chinese website!