css text truncation

Use this text to test text truncation

<div class="underflow ">行路难·其一
    【作者】李白 【朝代】唐
    金樽清酒斗十千，玉盘珍羞直万钱。
    
    停杯投箸不能食，拔剑四顾心茫然。
    
    欲渡黄河冰塞川，将登太行雪满山。
    
    闲来垂钓碧溪上，忽复乘舟梦日边。
    
    行路难，行路难，多歧路，今安在？
    
    长风破浪会有时，直挂云帆济沧海。
    译文：金杯里装的名酒，每斗要价十千；玉盘中盛的精美菜肴，收费万钱。胸中郁闷啊，我停杯投箸吃不下；拔剑环顾四周，我心里委实茫然。想渡黄河，冰雪堵塞了这条大川；要登太行，莽莽的风雪早已封山。像姜尚垂钓溪，闲待东山再起；伊尹乘舟梦日，受聘在商汤身边。何等艰难！何等艰难！歧路纷杂，真正的大道究竟在哪边？相信总有一天，能乘长风破万里浪；高高挂起云帆，在沧海中勇往直前！
  </div>

single line text truncation

.underflow{
    overflow: hidden;/*文字长度超出限定宽度，则隐藏超出的内容*/
    white-space: nowrap;/*设置文字在一行显示，不能换行, 没有省略号*/
    text-overflow: ellipsis;/*规定当文本溢出时，显示省略符号来代表被修剪的文本*/
  }

Example:

Ellipses cannot be copied.

multiline truncate (number of lines)

-webkit-line-clamp: 2;/*行数，需要组合其他的WebKit属性*/
    display: -webkit-box;/*对象作为弹性伸缩盒子模型显示*/
    -webkit-box-orient: vertical;/*设置或检索伸缩盒对象的子元素的排列方式*/
    overflow: hidden;/*溢出隐藏*/
    text-overflow: ellipsis;/*省略号*/

 Example:

Ellipses cannot be copied.

 multiline truncate(height)

overflow: hidden;
/* line-height: 20px; 行高可不设，为默认*/
max-height: 77px;/*最大高度，超过隐藏*/

Example:

 

There is no ellipsis, and the maximum height must be controlled, which is relatively blunt

 Well, mine is over here, these are commonly used, and there are some others, let’s see other big guys