I finally finished the project. Today I will share the implementation of some of the more practical functions in the project. The first one is that the pure CSS text exceeds the ellipsis.
/* single line of text beyond ellipsis */
.textels {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box; //Set the element to be displayed in the box expansion model
-webkit-box-orient: vertical; //The telescopic direction is set to the vertical direction
-webkit-line-clamp: 1; //Hide beyond 3 lines and display ellipsis
}
/* Text 2 lines beyond the ellipsis */
.textels-2 {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box; //Set the element to be displayed in the box expansion model
-webkit-box-orient: vertical; //The telescopic direction is set to the vertical direction
-webkit-line-clamp: 2; //Hide beyond 3 lines and display ellipsis
}
/* 3 lines of text beyond the ellipsis */
.textels-3 {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box; //Set the element to be displayed in the box expansion model
-webkit-box-orient: vertical; //The telescopic direction is set to the vertical direction
-webkit-line-clamp: 3; //Hide beyond 3 lines and display ellipsis
}
Change -webkit-line-clamp to a few if you want to show how many lines are exceeded with ellipsis.
It has been used n times, it is definitely possible, so I won't post the picture!
The next article will talk about how to use js to control the display of a few words. If it exceeds, it will be indicated by omission.