[css] Display ellipses beyond text

The prerequisite for displaying ellipses: there must be a specified width

1. Ellipses are displayed in the extended part of a single line of text.

Attributes	value	explain
overflow	hidden	When the content exceeds the width of the box, hide the overflow part
white-space	nowrap	Let the text display in one line without wrapping
text-overflow	ellipsis	If the overflowed content is text, use ellipses instead.

.one-line{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap
}

2. Ellipses are displayed in the extended part of multi-line text.

Attributes	value	explain
overflow	hidden	When the content exceeds the width of the box, hide the overflow part
text-overflow	ellipsis	If the overflowed content is text, use ellipses instead.
display	-webkit-box	The box attribute must be set to -webkit-box
-webkit-line-clamp	2、3、4…	After setting more than a few lines, ellipsis will be displayed in the excess part. Note: This is an unsupported WebKit property
-webkit-box-orient	vertical	The necessary conditions for the box to realize multi-line display, and the text is displayed vertically
word-break	break-all	Word destruction: Mainly used to destroy the integrity of English words, that is, break the English word before it is completely displayed on one line. The simple understanding is that a word may be displayed in two lines

.two-line{
  overflow:hidden;
  text-overflow: ellipsis;
  display:-webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient:vertical;
  -moz-box-orient:vertical;
  word-break: break-all;
}

 illustrate:

-webkit-line-clamp can limit the content in the block container to the specified number of lines. It is only available when display is set to -webkit-box or -webkit-inline-box and -webkit-box-orient is set to vertical. Effect.