头图

又出 bug 了 ?Safari 下文字和省略号重叠问题

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 奇技淫巧,有时候会帮上大忙

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


前端侦探
致力于有趣的前端探索~
14.1k 声望
13.6k 粉丝
0 条评论
推荐阅读
突发奇想!借助CSS自定义彩色字体来实现多行文本展开收起
之前写过这样一篇文章:CSS 实现多行文本“展开收起”,介绍了一些纯 CSS 实现多行文本展开收起的小技巧,特别是右下角的“展开收起”按钮,用到了浮动布局,非常巧妙,有兴趣的可以回顾一下。

XboxYan5阅读 328

封面图
正则表达式实例
收集在业务中经常使用的正则表达式实例,方便以后进行查找,减少工作量。常用正则表达式实例1. 校验基本日期格式 {代码...} {代码...} 2. 校验密码强度密码的强度必须是包含大小写字母和数字的组合,不能使用特殊...

寒青57阅读 8.6k评论 11

JavaScript有用的代码片段和trick
平时工作过程中可以用到的实用代码集棉。判断对象否为空 {代码...} 浮点数取整 {代码...} 注意:前三种方法只适用于32个位整数,对于负数的处理上和Math.floor是不同的。 {代码...} 生成6位数字验证码 {代码...} ...

jenemy49阅读 7.3k评论 12

再也不学AJAX了!(二)使用AJAX ① XMLHttpRequest
「再也不学 AJAX 了」是一个以 AJAX 为主题的系列文章,希望读者通过阅读本系列文章,能够对 AJAX 技术有更加深入的认识和理解,从此能够再也不用专门学习 AJAX。本篇文章为该系列的第二篇,最近更新于 2023 年 1...

libinfs42阅读 6.9k评论 12

封面图
CSS 绘制一只思否猫
欢迎关注我的公众号:前端侦探练习 CSS 有一个比较有趣的方式,就是发挥想象,绘制各式各样的图案,比如来绘制一只思否猫?思否猫,SegmentFault 思否的吉祥物,是一只独一无二、特立独行、热爱自由的(&gt;^ω^&lt...

XboxYan47阅读 3.3k评论 14

封面图
「多图预警」完美实现一个@功能
一天产品大大向 boss 汇报完研发成果和产品业绩产出,若有所思的走出来,劲直向我走过来,嘴角微微上扬。产品大大:boss 对我们的研发成果挺满意的,balabala...(内心 OS:不听,讲重点)产品大大:咱们的客服 I...

wuwhs32阅读 3.5k评论 5

封面图
还在用 JS 做节流吗?CSS 也可以防止按钮重复点击
举个例子:一个保存按钮,为了避免重复提交或者服务器考虑,往往需要对点击行为做一定的限制,比如只允许每300ms提交一次,这时候我想大部分同学都会到网上直接拷贝一段throttle函数,或者直接引用lodash工具库

XboxYan35阅读 2.7k评论 2

封面图
14.1k 声望
13.6k 粉丝
宣传栏