乐趣区

关于前端:又出-bug-了-Safari-下文字和省略号重叠问题

jiezi

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

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

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

没啥问题，和失常浏览器一样。然而这样有个问题，每行文字右端空隙太大，不美观，如下

上面加上文本两端对齐

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

啪！bug 就呈现了

当然，如果设计不介意的话，不应用文本两端对齐也能简略躲避这个问题。

那有没有什么方法能够解决这个问题呢？

一、为啥会有这个问题

呈现这个 bug 的起因在于，这个省略号是主动生成的，在 Safari 下没有受到文本两端对齐的作用，所以导致和文本产生了重叠，貌似是遗记了对这个省略号进行对齐解决。

因而，如果这个省略号是本人定义的，原本就在页面中，当然就不会有这个问题了。

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

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

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

  • CSS 实现多行文本“开展收起”
  • CSS 实现文本 ” 不定行数 ” 截断

有趣味的能够回顾一下，本文相当于这个技巧的另一个利用

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

后面说了，通过 -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 行了，只是当初还没有省略号，如下

如何增加省略号呢？接着往下看

二、右下角盘绕的省略号

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

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

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

为了不便演示，这里给伪元素增加了红色背景，如下

而后设置右浮动

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

这样省略号跑到了右上角

而后，将省略号挪动到右下角，能够用 flex 对齐实现

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

能够看到，省略号曾经到了右下角，然而没有盘绕成果

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

shapes布局能够很轻易的实现任意形态的盘绕成果。咱们这个盘绕成果很简略，只须要利用到 shape-outside:inset()就能够了，示意以本身为边界，而后上、右、下、左四个方向别离向内缩进的间隔，也能够设想成在右下角挖个孔，是不是就实现了右下角盘绕布局了？具体实现如下

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

成果如下

最初去除背景，看看成果

曾经很完满了，只是这个省略号始终都在

四、自动隐藏省略号

能够试试之前用过的“CSS 障眼法”。

原理很简略，就是用一个足够大的色块盖住省略号，设置相对定位后（不设置 left 和top），色块是追随内容文本的，

对于这个相对定位的小技巧，能够参考之前这篇文章：你可能不晓得的相对定位

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

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

成果是这样的

而后将这个色块换成和背景雷同的色彩就能够了

这样就不会呈现省略号重叠的状况了，看下两者比照（Safari 下）

残缺 demo 能够拜访以下任意链接（留神应用 Safari 浏览器，iOS 也行）：

  • CSS auto clamp (runjs.work)

五、总结一下

这样就绝对完满的解决了 Safari 下的小 bug，尽管实现不算特地简单，但还是有很多小技巧的，上面总结一下

  1. Safari 下在多行打点时如果设置了文本两端对齐，会导致省略号和文本重叠
  2. 起因在于省略号是主动加上的，Safari 貌似遗记了对这个省略号进行对齐解决，须要手动增加省略号
  3. 多行文本截断能够借助 max-height 和overflow:hidden
  4. 省略号右下角盘绕布局能够接着右浮动和 shapes 布局
  5. 自动隐藏省略号能够用一个相对定位的色块遮挡实现
  6. 适当积攒一些 CSS 奇技淫巧，有时候会帮上大忙

当然，这个形式也有局限性，仅限于纯色背景。另外，我也尝试了容器查问，发现并没有设想中的那么好用，有趣味的小伙伴能够尝试一下。最初，如果感觉还不错，对你有帮忙的话，欢送点赞、珍藏、转发❤❤❤

退出移动版