CSS realizes single-line or multi-line text overflow hides and displays ellipsis

1. The ellipsis is displayed when a single line exceeds

If the text exceeds the specified width of the parent element, the text will automatically wrap, while continuous uninterrupted numbers and English letters (no other characters) will not automatically wrap;

detailed steps:

• The first step (no line break): white-space:nowrop; (can be omitted for consecutive numbers or English letters)
• The second step (overflow hidden) overflow:hidden;
• The third step (text overflow display ellipsis) text-overflow: ellipsis; (ellipsis)

 white-space: nowrap;   //不换行
 overflow: hidden;       //超出部分隐藏
 text-overflow: ellipsis;    //文本溢出显示省略号

Two, multiple lines exceed the display

ellipsis

For browsers (Google/Safari) whose core is webkit, CSS styles can be used directly;

Overflow hidden: overflow: hidden;
Ellipsis: text-overflow: ellipsis; display: -webkit-box;
Elastic box model:
Set the arrangement of the child elements of the elastic box: -webkit-box-orient: vertical;
Set the line to display the text Number: -webkit-line-clamp: 5; (Display up to 5 lines)

overflow: hidden;//溢出隐藏
text-overflow: ellipsis;//省略号
display: -webkit-box;//
-webkit-box-orient: vertical;//设置弹性盒子的子元素的排列方式
-webkit-line-clamp: 5;//设置显示文本的行数