CSS 数学函数与容器查询实现不定宽文本溢出跑马灯效果

chokcocochokcoco -
CSS 数学函数与容器查询实现不定宽文本溢出跑马灯效果

在许久之前,曾经写过这样一篇文章 -- 不定宽溢出文本适配滚动。我们实现了这样一种效果:

文本内容不超过容器宽度,正常展示文本内容超过容器的情况,内容可以进行跑马灯来回滚动展示

像是这样:

但是,之前的方案,有一个很明显的缺点,如果我们事先知道了容器的宽度,那么没问题,但是如果没法确定容器的宽度,也就文本宽度不确定,容器宽度也不确定的话,那么整个效果会有一点瑕疵

瑕疵在于,当时的 CSS 技术,其实没法判断当前文本内容长度是否超过了其容器宽度,导致即便文本没有没有超长,Hover 上去也会进行一个来回滚动,像是这样:

容器查询 cqw 和 CSS 数学函数 max

背景描述大概是这样,感兴趣的同学,可以简单翻看一下上午提到的文章 -- 不定宽溢出文本适配滚动。

到今天,我们重新审视这个问题。看看到今天,我们可以如何更加简单便捷的解决这个问题!

首先,我们的问题其实可以抽象成:

判断文本宽度与容器宽度的大小差异,文本宽度是否大于容器宽度如果超出,则设置来回位移动画,位移的幅度为容器宽度与文本宽度的差值

那么,我们一步一步来。

假设我们的 HTML 结构如下:

<div >
    <span>Lorem ipsum dolor sit amet elit. Animi, aliquid.<span>
</div>

其中,div 为容器,span 为文本内容。同时,我们利用容器查询,设置父容器 marquee 为容器查询的容器,并且将基于容器的inline-size 维度。

.marquee {
    white-space: nowrap;
    container-type: inline-size;
}

继续,我们如何能够在 span 中得知,当前 span 的内容长度与父容器宽度谁比较大呢?

在之前,这是很难办到的,但是现在,我们有了 容器查询 后,可以靠容器查询单位 cqw 完成。

首先,什么是容器查询?容器查询它给予了 CSS,在不改变浏览器视口宽度的前提下,只是根据容器的宽度变化,对布局做成调整的能力。

对容器查询想了解更多的,可以戳:新时代布局新特性 -- 容器查询

容器查询带来了很多新的单位,其中有:

cqw 容器查询宽度(Container Query Width)占比。1cqw 等于容器宽度的 1%。假设容器宽度是 1000px,则此时 1cqw 对应的计算值就是 10px。cqh 容器查询高度(Container Query Height)占比。1cqh 等于容器高度的 1%。cqi 表示容器查询内联方向尺寸(Container Query Inline-Size)占比。这个是逻辑属性单位,默认情况下等同于 cqwcqb 容器查询块级方向尺寸(Container Query Block-Size)占比。同上,默认情况下等同于 cqhcqmin 容器查询较小尺寸的(Container Query Min)占比。取 cqw 和 cqh 中较小的一个cqmax 表示容器查询较大尺寸的(Container Query Min)占比。取 cqw 和 cqh 中较大的一个

本文,我们会运用到其中的 cqw,1cqw 等于容器宽度的 1%。那么,当前容器的宽度,其实就是 100 cqw。

那么:

width: 100% ,对于 span 行内元素而言,其文本长度就是其整个的宽度,100% 代表的就是文本内容的长度width: 100cqw 表示的是设置了容器查询的 .marquee 的宽度(也就是父容器的宽度)

OK,有了 100%100cqw 怎么比较他们谁大谁小呢?其实我们的关键不是谁大谁小,而是:

如果当前容器的宽度(也就是文本宽度)大于父容器宽度,需要得到一个动画位置值如果当前容器的宽度(也就是文本宽度)小于父容器宽度,无需动画,也就是动画位移值为 0

那么,我们的核心就变成了,0 与两个宽度差值的比较。刚好,CSS 中提供了比较大小数学函数 max()min()

关于 CSS 数学函数,你可以参考我的这篇文章 -- 现代 CSS 解决方案:CSS 数学函数

铺垫了这么久,最终,我们得到最为核心的一行代码:

max(100% - 100cqw, 0px)

当然,换一种思维,使用 min() 也是可以的:

min(100cqw - 100%, 0px)

如果 span 内容长度,大于容器宽度,也就是 100% - 100cqw 大于 0px,那么其实也就得到了跑马灯效果应该位移的距离。

我们顺便也就将整个效果的代码写完了,完整的代码:

.marquee {
    overflow: hidden;
    white-space: nowrap;
    width: 200px;
    resize: horizontal;
    container-type: inline-size;
}
.marquee span {
      animation: marquee 3s linear infinite both alternate;
}
@keyframes marquee {
    to {
        transform: translateX(min(100cqw - 100%, 0px));
    }
}

效果如下:

这样,到今天,我们可以轻易的实现:

文本内容不超过容器宽度,正常展示文本内容超过容器的情况,内容可以进行跑马灯来回滚动展示

也就是如下的效果:

完整的代码,你可以戳这里:Pure CSS Marquee

当然,硬要说的话,本方案还是存在一个缺陷,就是动画的时长是固定的,没法根据内容的长短响应式的进行适配。可能更适合文本内容相差不大的场景使用。

最后

本案例 DEMO 由日服第一切图仔佐子哥倾情贡献。好了,本文到此结束,希望本文对你有所帮助 :)

想 Get 到最有意思的 CSS 资讯,千万不要错过我的公众号 -- iCSS前端趣闻 😄

更多精彩 CSS 技术文章汇总在我的 Github -- iCSS ,持续更新,欢迎点个 star 订阅收藏。

如果还有什么疑问或者建议,可以多多交流,原创文章,文笔有限,才疏学浅,文中若有不正之处,万望告知。

本文参与了SegmentFault 思否写作挑战赛,欢迎正在阅读的你也加入。
特别申明:本文内容来源网络,版权归原作者所有,如有侵权请立即与我们联系(cy198701067573@163.com),我们将及时处理。

Tags 标签

challenge前端javascriptcss3html5

扩展阅读

加个好友,技术交流

1628738909466805.jpg