多行显示并截断最后一行文字？text-overflow的基础知识请阅读上一篇文章：text-overflow:ellipsis；什么时候可以不生效？单行文本为了能够截断文本，我们使用white-space:nowrap;//强制文本显示在一行上。如果我有多行并截断最后一行的文本显示怎么办？如何实现？方法1-Webkit-line-clamp属性优点：最简单的方法缺点：但不幸的是，它不支持跨浏览器（在Firefox和InternetExplorer中不起作用）。-webkit-line-clampCSS属性可以将块容器的内容限制为指定的行数。仅当display属性设置为-webkit-box或-webkit-inline-box且-webkit-box-orient属性设置为时有效。大多数情况下，还需要将overflow属性设置为hidden，否则，里面的内容不会被剪切，内容显示到指定行数后会显示省略号（ellipsis）。当应用于锚定（anchor）元素时，拦截动作可以发生在文本的中间，而不是最后。用法：.block-with-text{溢出：隐藏；显示：-webkit-box；-webkit-line-clamp:3;-webkit-box-orient：垂直；}方法二Text-overflow:-o-ellipsis-lastline从10.60版本开始，Opera增加了在多行块上剪切文本的功能。老实说，我从来没有尝试过。理论上只能在Opera10.6之后使用，不推荐使用。方法三JavaScript#block-with-text{height:3.6em;}functionellipsizeMultiLineText(id){varelement=document.getElementById(id);varwords=element.innerHTML.split('');while(element.scrollHeight>element.offsetHeight){words.pop();element.innerHTML=words.join('')+'...';}}ellipsizeMultiLineText('block-with-text');方法四纯CSS方案&跨浏览器优点纯CSS自适应响应调整大小或字体加载事件后无需重新计算跨浏览器缺点当文本小于指定行数时，我们需要一个背景色来掩盖'...'我们需要空间来放置'...'，如果父节点overflow:hidden或overflow:auto我们需要删除样式margin-right:-1em;。实现方法/*stylesfor'...'*/.block-with-text{/*如果超过N行则隐藏文本*/overflow:hidden;/*在绝对位置设置'...'*/position:relative;/*使用这个值来计算块的高度*/line-height:1.2em;/*max-height=line-height(1.2)*linesmaxnumber(3)*/max-height:3.6em;/*修复最后一个可见单词不与右侧相邻的问题*/text-align:justify;/*'...'的位置*/margin-right:-1em;padding-right:1em;}/*创建...*/.block-with-text:before{/*指向末尾*/content:'...';/*绝对位置*/position:absolute;/*将位置设置为块的右下角*/right:0;bottom:0;}/*隐藏...如果我们有小于或等于最大行数的文本*/.block-with-text:after{/*指向最后*/content:'';/*绝对位置*/position:absolute;/*将位置设置为文本的右下角*/right:0;/*设置宽度和高度*/width:1em;高度：1em；上边距：0.2em；/*bgcolor=bgcolorunderblock*/background:white;}实现原理大于3行："..."之前的内容在右下角，因为文字是对齐的（text-align:justify;)并且文本和“...”之间没有间隙：删除CSStext-align:justify;你会看到文字和“...”之间有一个空隙：小于3行时看不到“...”，等于时看不到“...”to3行方法5纯SCSS方案&跨浏览器由于方法4的不足，写一个SCSSmixin使用起来更方便，可复用。CodePen多行示例链接
