草庐IT

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

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

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

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

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

下面加上文本两端对齐

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

啪!bug 就出现了

image-20230311122556890

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

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

一、为啥会有这个问题

出现这个 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 布局[2]。

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

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

效果如下

最后去除背景,看看效果

Kapture 2023-03-11 at 15.11.38

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

四、自动隐藏省略号

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

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

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

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

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

效果是这样的

Kapture 2023-03-11 at 16.26.20

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

Kapture 2023-03-11 at 16.30.29

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

image-20230311164124148

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

  • CSS auto clamp (juejin.cn)[4]
  • CSS auto clamp (runjs.work)[5]

五、总结一下

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

  1. Safari 下在多行打点时如果设置了文本两端对齐,会导致省略号和文本重叠
  2. 原因在于省略号是自动加上的,Safari 貌似忘记了对这个省略号进行对齐处理,需要手动添加省略号
  3. 多行文本截断可以借助 max-height 和overflow:hidden
  4. 省略号右下角环绕布局可以接着右浮动和shapes布局
  5. 自动隐藏省略号可以用一个绝对定位的色块遮挡实现
  6. 适当积累一些 CSS 奇技淫巧,有时候会帮上大忙
当然,这个方式也有局限性,仅限于纯色背景。另外,我也尝试了容器查询,发现并没有想象中的那么好用,有兴趣的小伙伴可以尝试一下。

参考资料

[1]CSS 实现多行文本“展开收起” - 掘金 (juejin.cn): https://juejin.cn/post/6963904955262435336

[2]CSS shapes 布局: https://developer.mozilla.org/zh-CN/docs/Web/CSS/shape-outside

[3]你可能不知道的绝对定位: https://juejin.cn/post/7204633786934607929

[4]CSS auto clamp (juejin.cn): https://code.juejin.cn/pen/7209206349798834235

[5]CSS auto clamp (runjs.work): https://runjs.work/projects/77766da9480c43cc

有关又出 bug 了 ?Safari 下文字和省略号重叠问题的更多相关文章

  1. ruby - 在 64 位 Snow Leopard 上使用 rvm、postgres 9.0、ruby 1.9.2-p136 安装 pg gem 时出现问题 - 2

    我想为Heroku构建一个Rails3应用程序。他们使用Postgres作为他们的数据库,所以我通过MacPorts安装了postgres9.0。现在我需要一个postgresgem并且共识是出于性能原因你想要pggem。但是我对我得到的错误感到非常困惑当我尝试在rvm下通过geminstall安装pg时。我已经非常明确地指定了所有postgres目录的位置可以找到但仍然无法完成安装:$envARCHFLAGS='-archx86_64'geminstallpg--\--with-pg-config=/opt/local/var/db/postgresql90/defaultdb/po

  2. ruby - 通过 rvm 升级 ruby​​gems 的问题 - 2

    尝试通过RVM将RubyGems升级到版本1.8.10并出现此错误:$rvmrubygemslatestRemovingoldRubygemsfiles...Installingrubygems-1.8.10forruby-1.9.2-p180...ERROR:Errorrunning'GEM_PATH="/Users/foo/.rvm/gems/ruby-1.9.2-p180:/Users/foo/.rvm/gems/ruby-1.9.2-p180@global:/Users/foo/.rvm/gems/ruby-1.9.2-p180:/Users/foo/.rvm/gems/rub

  3. ruby - 通过 RVM (OSX Mountain Lion) 安装 Ruby 2.0.0-p247 时遇到问题 - 2

    我的最终目标是安装当前版本的RubyonRails。我在OSXMountainLion上运行。到目前为止,这是我的过程:已安装的RVM$\curl-Lhttps://get.rvm.io|bash-sstable检查已知(我假设已批准)安装$rvmlistknown我看到当前的稳定版本可用[ruby-]2.0.0[-p247]输入命令安装$rvminstall2.0.0-p247注意:我也试过这些安装命令$rvminstallruby-2.0.0-p247$rvminstallruby=2.0.0-p247我很快就无处可去了。结果:$rvminstall2.0.0-p247Search

  4. ruby - Fast-stemmer 安装问题 - 2

    由于fast-stemmer的问题,我很难安装我想要的任何ruby​​gem。我把我得到的错误放在下面。Buildingnativeextensions.Thiscouldtakeawhile...ERROR:Errorinstallingfast-stemmer:ERROR:Failedtobuildgemnativeextension./System/Library/Frameworks/Ruby.framework/Versions/2.0/usr/bin/rubyextconf.rbcreatingMakefilemake"DESTDIR="cleanmake"DESTDIR=

  5. ruby - 安装 Ruby 时遇到问题(无法下载资源 "readline--patch") - 2

    当我尝试安装Ruby时遇到此错误。我试过查看this和this但无济于事➜~brewinstallrubyWarning:YouareusingOSX10.12.Wedonotprovidesupportforthispre-releaseversion.Youmayencounterbuildfailuresorotherbreakages.Pleasecreatepull-requestsinsteadoffilingissues.==>Installingdependenciesforruby:readline,libyaml,makedepend==>Installingrub

  6. java - 从 JRuby 调用 Java 类的问题 - 2

    我正在尝试使用boilerpipe来自JRuby。我看过guide从JRuby调用Java,并成功地将它与另一个Java包一起使用,但无法弄清楚为什么同样的东西不能用于boilerpipe。我正在尝试基本上从JRuby中执行与此Java等效的操作:URLurl=newURL("http://www.example.com/some-location/index.html");Stringtext=ArticleExtractor.INSTANCE.getText(url);在JRuby中试过这个:require'java'url=java.net.URL.new("http://www

  7. ruby-on-rails - 简单的 Ruby on Rails 问题——如何将评论附加到用户和文章? - 2

    我意识到这可能是一个非常基本的问题,但我现在已经花了几天时间回过头来解决这个问题,但出于某种原因,Google就是没有帮助我。(我认为部分问题在于我是一个初学者,我不知道该问什么......)我也看过O'Reilly的RubyCookbook和RailsAPI,但我仍然停留在这个问题上.我找到了一些关于多态关系的信息,但它似乎不是我需要的(尽管如果我错了请告诉我)。我正在尝试调整MichaelHartl'stutorial创建一个包含用户、文章和评论的博客应用程序(不使用脚手架)。我希望评论既属于用户又属于文章。我的主要问题是:我不知道如何将当前文章的ID放入评论Controller。

  8. 【高数】用拉格朗日中值定理解决极限问题 - 2

    首先回顾一下拉格朗日定理的内容:函数f(x)是在闭区间[a,b]上连续、开区间(a,b)上可导的函数,那么至少存在一个,使得:通过这个表达式我们可以知道,f(x)是函数的主体,a和b可以看作是主体函数f(x)中所取的两个值。那么可以有,  也就意味着我们可以用来替换 这种替换可以用在求某些多项式差的极限中。方法: 外层函数f(x)是一致的,并且h(x)和g(x)是等价无穷小。此时,利用拉格朗日定理,将原式替换为 ,再进行求解,往往会省去复合函数求极限的很多麻烦。使用要注意:1.要先找到主体函数f(x),即外层函数必须相同。2.f(x)找到后,复合部分是等价无穷小。3.要满足作差的形式。如果是加

  9. SPI接收数据异常问题总结 - 2

    SPI接收数据左移一位问题目录SPI接收数据左移一位问题一、问题描述二、问题分析三、探究原理四、经验总结最近在工作在学习调试SPI的过程中遇到一个问题——接收数据整体向左移了一位(1bit)。SPI数据收发是数据交换,因此接收数据时从第二个字节开始才是有效数据,也就是数据整体向右移一个字节(1byte)。请教前辈之后也没有得到解决,通过在网上查阅前人经验终于解决问题,所以写一个避坑经验总结。实际背景:MCU与一款芯片使用spi通信,MCU作为主机,芯片作为从机。这款芯片采用的是它规定的六线SPI,多了两根线:RDY和INT,这样从机就可以主动请求主机给主机发送数据了。一、问题描述根据从机芯片手

  10. git使用常见问题(提交代码,合并冲突) - 2

    文章目录git常用命令(简介,详细参数往下看)Git提交代码步骤gitpullgitstatusgitaddgitcommitgitpushgit代码冲突合并问题方法一:放弃本地代码方法二:合并代码常用命令以及详细参数gitadd将文件添加到仓库:gitdiff比较文件异同gitlog查看历史记录gitreset代码回滚版本库相关操作远程仓库相关操作分支相关操作创建分支查看分支:gitbranch合并分支:gitmerge删除分支:gitbranch-ddev查看分支合并图:gitlog–graph–pretty=oneline–abbrev-commit撤消某次提交git用户名密码相关配置g

随机推荐