7
头图

Safari不愧是新时代的 IE,各种 bug 层出不穷。比如有这样一个多行省略打点的布局

div{
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

这样在文本超过三行的时候就会出现省略号

image.png

没啥问题,和正常浏览器一样。但是这样有个问题,每行文字右端空隙太大,不美观,如下

image.png

下面加上文本两端对齐

div{
    /* */
    text-align: justify;
}

啪!bug 就出现了

image.png

当然,如果设计不介意的话,不使用文本两端对齐也能简单规避这个问题。

那有没有什么办法可以解决这个问题呢?

一、为啥会有这个问题

出现这个 bug 的原因在于,这个省略号是自动生成的,在Safari没有受到文本两端对齐的作用,所以导致和文本发生了重叠, 貌似是忘记了对这个省略号进行对齐处理。

因此,如果这个省略号是自己定义的,本来就在页面中,当然就不会有这个问题了。

要实现超过指定行数出现省略号有几个实现点:

  1. 超过指定行数截断文本
  2. 右下角环绕的省略号
  3. 在字数较少时自动隐藏省略号

之前在这两篇文章中都用到了相关技巧

有兴趣的可以回顾一下,本文相当于这个技巧的另一个应用

二、超过指定行数截断文本

前面说了,通过-webkit-line-clamp设置的超出文本在Safari下有 bug,所以需要借助其他方式来实现。

抛开省略号,其实这个比较好实现,给一个固定最大高度,超出就通过overflow:hidden隐藏就行了。

假设布局是这样的

<div class="con">
  <div class="txt">
    欢迎关注前端侦探,这里有一些有趣的、你可能不知道的HTML、CSS、JS小技巧技巧,比如这篇文章,safari又出bug了,省略号和文本重叠了,如何修复这个问题呢?一起看看吧
  </div>
</div>

为了方便行数控制,可以更加行高来确定最大高度,比如 3 行,那么最大高度就是1.5 * 3 = 4.5em

.txt{
  line-height: 1.5; 
  max-height: 4.5em; /*1.5 * 3*/
  overflow: hidden;
}

这样整个文本就不会超出 3 行了,只是现在还没有省略号,如下

image.png

如何添加省略号呢?接着往下看

二、右下角环绕的省略号

这是一个典型的文本环绕布局。提到环绕,就不得不用上浮动float

我们通过伪元素生成省略号,并设置浮动

.txt::before{
    content: '...';
    float: left;
}

为了方便演示,这里给伪元素添加了红色背景,如下

image.png

然后设置右浮动

.txt::before{
    content: '...';
    float: right;
}

这样省略号跑到了右上角

image.png

然后,将省略号移动到右下角,可以用flex对齐实现

.txt::before{
    content: '...';
    float: right;
    height: 100%;
    display: flex;
    align-items: flex-end;/*居底对齐*/
}

可以看到,省略号已经到了右下角,但是没有环绕效果

image.png

如何让这个省略号到右下角呢?这就需要用到 CSS shapes 布局

shapes布局可以很轻易的实现任意形状的环绕效果。我们这个环绕效果很简单,只需要利用到 shape-outside:inset()就可以了,表示以自身为边界,然后上、右、下、左四个方向分别向内缩进的距离,也可以想象成在右下角挖个孔,是不是就实现了右下角环绕布局了?具体实现如下

.txt::before{
    shape-outside: inset(calc(100% - 1em) 0 0 0);
    margin-left: 2px;
}

效果如下

image.png

最后去除背景,看看效果

Kapture 2023-03-11 at 15.11.38.gif

已经很完美了,只是这个省略号一直都在

image.png

四、自动隐藏省略号

可以试试之前用过的 “CSS 障眼法”。

原理很简单,就是用一个足够大的色块盖住省略号,设置绝对定位后(不设置lefttop),色块是跟随内容文本的,

关于这个绝对定位的小技巧,可以参考之前这篇文章:你可能不知道的绝对定位

所以在文字较多时,色块也跟随文本挤下去了,实现如下

.txt::after{
    content: '';
    position: absolute;
    width: 999vh;
    height: 999vh;
    background: #fff;
} 

效果是这样的

Kapture 2023-03-11 at 16.26.20.gif

然后将这个色块换成和背景相同的颜色就可以了

Kapture 2023-03-11 at 16.30.29.gif

这样就不会出现省略号重叠的情况了,看下两者对比(Safari下)

image.png

完整 demo 可以访问以下任意链接(注意使用 Safari 浏览器,iOS也行):

五、总结一下

这样就相对完美的解决了 Safari 下的小 bug,虽然实现不算特别复杂,但还是有很多小技巧的,下面总结一下

  1. Safari 下在多行打点时如果设置了文本两端对齐,会导致省略号和文本重叠
  2. 原因在于省略号是自动加上的,Safari 貌似忘记了对这个省略号进行对齐处理,需要手动添加省略号
  3. 多行文本截断可以借助 max-height overflow:hidden
  4. 省略号右下角环绕布局可以接着右浮动和shapes布局
  5. 自动隐藏省略号可以用一个绝对定位的色块遮挡实现
  6. 适当积累一些 CSS 奇技淫巧,有时候会帮上大忙

当然,这个方式也有局限性,仅限于纯色背景。另外,我也尝试了容器查询,发现并没有想象中的那么好用,有兴趣的小伙伴可以尝试一下。最后,如果觉得还不错,对你有帮助的话,欢迎点赞、收藏、转发❤❤❤


XboxYan
17k 声望14k 粉丝