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.
2. HTML code
The red box is the news summary information queried from the database
3. CSS code
The main code is as follows:
.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; /*(多行文本的情况下,用省略号“…”隐藏溢出范围的文本)*/