css文本截断

用这段文字来测试文本截断

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

单行文本截断

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

示例：

省略号不能复制。

多行截断（行数）

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

 示例：

省略号不能复制。

 多行截断（高度）

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

示例：

 

没有省略号，要控制好最大高度，比较生硬

 好了，我的到这就结束了，这些是常用的，还有一些其他的，看其他大佬的吧