乐趣区

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

jiezi

在许久之前，已经写过这样一篇文章 — 不定宽溢出文本适配滚动。咱们实现了这样一种成果：

  1. 文本内容不超过容器宽度，失常展现
  2. 文本内容超过容器的状况，内容能够进行跑马灯来回滚动展现

像是这样：

然而，之前的计划，有一个很显著的毛病，如果咱们当时晓得了容器的宽度，那么没问题，然而如果没法确定容器的宽度，也就文本宽度不确定，容器宽度也不确定的话，那么整个成果会有一点瑕疵。

瑕疵在于，过后的 CSS 技术，其实没法判断以后文本内容长度是否超过了其容器宽度，导致即使文本没有没有超长，Hover 下来也会进行一个来回滚动，像是这样：

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

背景形容大略是这样，感兴趣的同学，能够简略翻看一下上午提到的文章 — 不定宽溢出文本适配滚动。

到明天，咱们从新扫视这个问题。看看到明天，咱们能够如何更加简略便捷的解决这个问题！

首先，咱们的问题其实能够形象成：

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

那么，咱们一步一步来。

假如咱们的 HTML 构造如下：

<div class="marquee">
    <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）占比。这个是逻辑属性单位，默认状况下等同于 cqw
  • cqb 容器查问块级方向尺寸（Container Query Block-Size）占比。同上，默认状况下等同于 cqh
  • cqmin 容器查问较小尺寸的（Container Query Min）占比。取 cqw 和 cqh 中较小的一个
  • cqmax 示意容器查问较大尺寸的（Container Query Min）占比。取 cqw 和 cqh 中较大的一个

本文，咱们会使用到其中的 cqw，1cqw 等于容器宽度的 1%。那么，以后容器的宽度，其实就是 100 cqw。

那么：

  1. width: 100%，对于 span 行内元素而言，其文本长度就是其整个的宽度，100% 代表的就是文本内容的长度
  2. width: 100cqw 示意的是设置了容器查问的 .marquee 的宽度（也就是父容器的宽度）

OK，有了 100% 和 100cqw 怎么比拟他们谁大谁小呢？其实咱们的要害不是谁大谁小，而是：

  1. 如果以后容器的宽度（也就是文本宽度）大于父容器宽度，须要失去一个动画地位值
  2. 如果以后容器的宽度（也就是文本宽度）小于父容器宽度，无需动画，也就是动画位移值为 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));
    }
}

成果如下：

这样，到明天，咱们能够轻易的实现：

  1. 文本内容不超过容器宽度，失常展现
  2. 文本内容超过容器的状况，内容能够进行跑马灯来回滚动展现

也就是如下的成果：

残缺的代码，你能够戳这里：Pure CSS Marquee

当然，硬要说的话，本计划还是存在一个缺点，就是动画的时长是固定的，没法依据内容的长短响应式的进行适配。可能更适宜文本内容相差不大的场景应用。

最初

本案例 DEMO 由日服第所有图仔佐子哥倾情奉献。好了，本文到此结束，心愿本文对你有所帮忙 :)

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

更多精彩 CSS 技术文章汇总在我的 Github — iCSS，继续更新，欢送点个 star 订阅珍藏。

如果还有什么疑难或者倡议，能够多多交换，原创文章，文笔无限，满腹经纶，文中若有不正之处，万望告知。

本文参加了 SegmentFault 思否写作挑战赛，欢送正在浏览的你也退出。

退出移动版