为了方便控制??行数，可以根据行的高度来确定最大高度，比如3行，那么最大高度就是1.5*3=4.5em.txt{行高：1.5；最大高度：4.5em；/*1.5*3*/overflow:hidden;}这样，整个文本不会超过3行，但是还没有省略号，请问如何添加省略号如下？再往下看二，右下角的省略号这是一个典型的文字环绕布局。说到包裹，就得用float了。我们通过伪元素生成一个省略号，设置float.txt::before{content:'...';float:left;}为了演示方便，这里我们给伪元素加上红色背景，如下，然后设置右边的float.txt::before{content:'...';float:right;}让省略号移动到右上角，然后把省略号移动到右下角，可以通过flexalignment.txt::before{content:'...';实现浮动：对；高度：100%；显示：弹性；align-items:flex-end;/*底部对齐*/}可以看到，省略号已经到了右下角，但是没有环绕效果。如何让省略号到达右下角毛呢布？这需要使用CSS形状布局。形状布局可以轻松实现任意形状的环绕效果。我们的环绕效果非常简单。我们只需要使用shape-outside:inset()，也就是我们以自己为边界，然后在上、右、下、左四个方向向内缩进。也可以想象在右下角挖一个洞，是不是可以实现右下角周围的布局呢？具体实现如下。txt::before{外部形状：插入（计算（100%-1em）000）；margin-left:2px;}效果如下最后去掉背景，看到效果很完美，就这个省略号一直都在4.自动隐藏省略号你可以试试之前用过的“CSS蒙眼法”.原理很简单。就是用足够大的色块覆盖省略号。设置绝对定位后（不设置left和top），色块跟随内容文本。关于这个绝对定位的小技巧，可以参考之前的文章：你可能不知道的绝对定位，所以当文字多的时候，色块也会跟着文字一起被压下去，如下。txt::after{内容：'';位置：绝对；宽度：999vh；身高：999vh；background:#fff;}效果是这样的，然后把色块换成和背景一样的颜色，这样就不会出现省略号的重叠了，完整的demo见两者对比（Safari下），可以访问以下任意一个链接（注意使用Safari浏览器，iOS也可以）：CSSautoclamp(runjs.work)5.综上所述，比较完美的解决了Safari下的小bug。虽然实现起来不是特别复杂，但是小技巧还是有很多的，总结一下，如果在Safari中文本在多行点的两端对齐，省略号和文本会重叠。原因是省略号是自动添加的。Safari好像忘记对齐省略号了，需要手动添加省略号。多行文本可以借助max-height和overflow:hidden截断省略号右下角环绕布局可以跟右浮动和shapes布局自动隐藏省略号可以使用绝对定位的色块来遮挡并适当积累一些CSS技巧和窍门，有时会有很大帮助。当然，这种方法也有局限性，仅适用于纯色背景。另外，我也尝试了容器查询，发现并没有想象中的那么好用。有兴趣的朋友可以试试。最后，如果觉得对你有帮助，请点赞、收藏、转发???