Display ellipsis when css implements multi-line text

1. Effect

The effect diagram is as follows. In the news section of the homepage of the system, only the first three lines of data in the summary section are required to be displayed, and the redundant data are omitted.

insert image description here

2. HTML code

The red box is the news summary information queried from the database
insert image description here

3. CSS code

The main code is as follows:
insert image description here

.core-text{
    
    
	color: #999;
	font-size: 14px;
	line-height: 150%;
	//padding: 6px 0px;
	width: 100%;
	overflow : hidden;
	display: -webkit-box;    /*弹性伸缩盒子*/
	-webkit-box-orient: vertical; /*子元素垂直排列*/
	-webkit-line-clamp: 3;   /*可以显示的行数,超出部分用...表示*/
	text-overflow: ellipsis; /*(多行文本的情况下,用省略号“…”隐藏溢出范围的文本)*/

Guess you like

Origin blog.csdn.net/qq_46112274/article/details/124300761