如何截断多行文本？

初始css代码主要设置容器的宽度、行高和overflow:hidden:.wrap{width:300px;高度：3.6em；边框：1px实心#eee；溢出：隐藏；font:70016px/1.2"MicrosoftYahei";}下面的方法都是根据样式名wrap添加自己的多重选择器。-webkit-line-camp先实现这个，因为这可能是最简单的方法，代码：.line-camp{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient：垂直；}直接使用-webkit-line-clamp来控制行数就可以达到目的。当文本超过三行时，将被截断并添加省略号。但是当你看到这个-webkit-的时候，你就会知道这只是针对webkit内核的浏览器，Firefox是不支持的。这是一个很严重的问题，目前还没有很好的破解方法。并且注意我这里的文字使用了div包裹，加上p等默认内边距或者外边距的元素进行包裹，这种样式会有很大的问题，不能使用。所以，这个属性看起来很美，但是用起来限制太大了。。。不得不吐槽一下为什么这个属性不规范，下面也没有那么多东西。我对实现浮动功能的方法感到非常惊讶。网上有很多文章介绍这个，自己搜索了一下，找到了原文。这是一个回顾。从这个方法的思路来源来看，假设一个容器里面有3个block，固定大小（宽度300px），一个左边浮动（宽度100px）完全加高，右边两个右边浮动根据自适应拉伸到文字的数量。当蓝色块中的文字逐渐增加时，橙色块的位置也会发生变化。图中容器的高度恰好是行高的三倍，所以当蓝色块中的文字小于等于三行时，橙色块会一直移动到蓝色块的右下方：当蓝色块中的文字大于三行，橙色块会移动到蓝色块的右边，粉红色块的下方：由于浮动特性，橙色块的移动给了我们灵感，新增一个黄色相对于橙色块的块：.realend{position:absolute;宽度：100%；顶部：-20px；左：200px；背景色：黄色；}然后黄色块随着蓝色块文字的增加而移动效果如下：惊喜的发现，当蓝色块文字溢出时，黄色块可以作为右下角的省略号位置，而黄色块在没有溢出的时候溢出了容器，刚好满足要求。但是这样一个额外的标签的绝对定位显然是非常冗长的。我们可以使用相对定位，只保留黄色块：.realend{float:right;宽度：80px；背景色：黄色；位置：相对；左：200px；top:-20px;}效果是一样的：整个思路已经确立，接下来就是处理存在的问题了。红色块的宽度将蓝色块向右推了100px，这显然是不合理的。使用negativemargin处理蓝色块，设置蓝色块为100%宽度，然后设置margin-left为-100px，这样蓝色块可以填满整个容器并盖住粉色块，黄色块也设置其自身的宽度负margin-left设置为-80px，然后利用盒模型的原理将padding-right设置为粉色块的宽度100px（也可以设置margin-right，和boxmodel是用来使黄色块的实际boxmodel宽度为紫色块的宽度），这里negativemargin的用法很巧妙，大家可以多了解一下，然后100%定位到左边..main{浮动：对；宽度：100%；左边距：-100px；背景色：#00ffff；}.realend{浮动：正确；宽度：80px；背景色：黄色；100%；顶部：-20px；左边距：-80px；padding-right:100px;}效果如下：添加overflow:hidden即可轻松实现效果。最后，我们根据上面的原则实现第二次文本截断：.ellipsis:before{content:"";向左飘浮;宽度：5px；高度：3.6em；}.ellipsis>*:first-child{float:right;宽度：100%；左边距：-5px；}.ellipsis:after{内容：“\02026”；框大小：内容框；-webkit-box-sizing：内容框；尺寸：内容框；浮动：对；位置：相对；顶部：-1.2em；左：100%；宽度：3em；左边距：-3em；填充右：5px；尺寸：100%100%；/*512x1图像，IE9的渐变。0%透明->50%白色->100%白色。*/background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAgAAABCAMAALACdBTUEAALABG/xhBQAAAwBQTFRF//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////AAAA////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////wDWRdwAAAP90Uk5TgsRjMZXhS30YrvDUP3Emow1YibnM9+ggOZxrBtpRRo94gxItwLOoX/vsHdA2yGgL8+TdKUK8KATWJWFmHSG+rb5KMCA8aM0iwpWV6dwP9+fXuFerm3yMs0jDOysY8wr5FTldeoWKabgEJ8RATG+IeIdsn2NUqLjQ3OgBDumC3SbRMsVKsValZplydZpZpbJOQco2KdYeEe36BDAL8/vgHBfr2CvTyDu8R7esU6RcZ5ecc4+Af3iLcJSjZ1ivT0S/PMs3LNck4x8U7wz7Bv0G9RLtHuEq1TbJQr1OtVqqnWqRdoqBhnmSbZ5mXapRtcJGOc4t2eYiFfH9AS7qYlgAAARlJREFUKM9jqK9fEGS7VNrDI2+F/nyB1Z4Fa5UKN4TbbeLY7FW0Tatkp3jp7mj7vXzl+4yrDsYoVx+JYz7mXXNSp/a0RN25JMcLPP8umzRcTZW77tNyk63tdprzXdmO+2ZdD9MFe56Y9z3LUG96mcX02n/CW71JH6Qmf8px/cw77ZvVzB+BCj8D5vxhn/vXZh6D4uzf1rN+Cc347j79q/zUL25TPrJMfG/5LvuNZP8rixeZz/mf+vU+Vut+5NL5gPOeb/sd1dZbTs03hBuvmV5JuaRyMfk849nEM7qnEk6IHI8/qn049hB35QGHiv0yZXuMdkXtYC3ebrglcqvYxoj1muvC1nDlrzJYGbpcdHHIMo2FwYv+j3QAAOBSfkZYITwUAAAAAElFTkSuQmCC);背景：-webkit-gradient(linear,lefttop,righttop,from(rgba(255,255,255,0)),to(white),color-stop(50%,white));背景：-moz-linear-gradient（向右，rgba（255、255、255、0），白色50%，白色）；背景：-o-linear-gradient（向右，rgba（255、255、255、0），白色50%，白色）；背景：-ms-linear-gradient（向右，rgba（255、255、255、0），白色50%，白色）；背景：线性渐变（向右，rgba（255、255、255、0），白色50%，白色）；js实现夜深人静。。。下次再写TODO。。。推荐第二种方案，利用浮动和负边距等特性。可以兼容所有浏览器，对理解css也很有帮助。js的方式其实很繁琐，效率很低。如果必须，请不要使用它。参考本站好的解决方案或者本站的总结。