用这段文字来测试文本截断
<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;/*最大高度,超过隐藏*/
示例:
没有省略号,要控制好最大高度,比较生硬
好了,我的到这就结束了,这些是常用的,还有一些其他的,看其他大佬的吧