CSS 技巧一则 — 不定宽溢出文本适配滚动


在日常布局傍边,必定经常会遇到文本内容超过容器的状况。非常常见的一种处理方案是超出省掉。

可是,有的时分,由于场景的限制,或许会出现在一些无法运用超出打点省掉的方法的场景,譬如在导航栏中:

CSS 技巧一则 -- 不定宽溢出文本适配翻滚

这种状况下,在容器定宽可是文本又溢出且不| o * v P能换行的状况下,我们就需求寻求别的的处理方案。

hover 时弹出框提示

一种可行的方案是在 hover 的时分,弹出一个文本框展现全文,最简略的就是在文本标签下添加 title 属性,填充我们需求的内容:@ b 3 j y . S .

<nav>
<p title="溢出文本1 溢出文本2{ r 2 溢出文本3 溢出文+ 7 5 n 0 5 8 8 v本4">溢出文本1 溢出文本N 1 X @ ~ %2 溢出文本3 溢出文本4</p>
</nav>
CSS 技巧一则 -- 不定宽溢出文本适配翻滚

当然,这种方法简略可是或许缺少点用户领会。


本文将简略介绍在文本长度不确定,容器长度也不确定的状况下,恣意长度的文本完结 hover 状态下,从左向右,翻滚到文本结尾,再翻滚回初始方位,如此重复,像是这样:

CSS 技巧一则 -- 不定宽溢出文本适配翻滚

容器定宽,文本不定宽

我们先假定一下,我们的容器的宽度假设是 m d p r固定的,可是不确定每条文本的宽度。

像是这样:

<div class="wrap">
<p title="我r u 的宽度是正常宽度">我的宽度是正常宽度</p>
<p class="s5 r v gcroll" titlJ j * _ $ = 2 , Ce="我的宽度是溢出了一小部分">我的宽度是溢出了一小v / A :部分</p>
<p class="scroll" title="我的宽度是溢出了溢出了很大一部分">我的宽度是溢出了溢出了很大一部分</p>
</div>
.wrap {
position: relative;
width: 150px;
overflow: hidden;
}
p {
white-space: nowrap;
}

运用 inline-block 获取实践文本的宽度

由于 <p> 标签的宽度为父元素的 100%,假设m $ k n p P m U是这样,我们很难进行下面的操作。我们首要需求拿到实践文本的宽度,这儿可以凭借 inle , Q k g k Kine-blocj 1 / ` A w Vk 的特性,做` V o j到这一点,我们改进下我们的 CSS:A | x : s

p {
+  display: inli5 &  d L nne-block;
white-space: nowrap;
}

这样,当| w & i N&lI j ht;p> 标签的实践宽度,其实就是整个文本元素的宽度L y 1 { Q Y

CSS 技巧一则 -- 不定宽溢出文本适配翻滚

Tips:这儿没有n ( { j运用 display: iz b _ x w s 1 Knline 是由于下文我们需求让 p 元素翻滚起来需求用到 transform,可是 transfc ( H g Qorm 是无法效果在内联元素之上的。n ^ f J详细可以参看标准:transR I cformable element

算出翻滚距离,进行翻滚2 S D C

这样,我们有了父元素的宽度 150px,文本的宽度。那么很简略得& j / e H & l c到需求翻滚的距离:

需求翻滚的距离 S = 溢出的文本元素的宽度 – 父元素的宽度

这样,我们只需求找到一个可以表a | = l : E明而且其时文本宽度是变量值即可。即是 — transoform

由于在运用 transform: translate() 进行位移y } – m S的时分,假设运用百分比标明,那么百分比的基准元素是元素自身,也就是假设我们 transform: translateg y ? j ; U 3(100%, 0),其实标明的就是向右移动一个元素自身宽度的距离。

那么我们可以凭借 calc 非常简略的拿到我们上述的需求翻滚的距离 S — transform: translate(calc(-100%F l H 8 e + 150px), 0),嵌入动画中:

p:hover {
animation: move 1.5s infinite alternate linear;
}
@keyframes move {
0% {
t` J 0 & & I Q a Cransform: translate(0, 0);
}
100% {
transform: translate(calc(-100% + 150px), 0);
}
}

至此,关于任` B / & 6 ; &意超出容器宽度的文本,我们都可以轻松的完结上述的效果。

CSS 技巧一则 -- 不定宽溢出文本适配翻滚
  • 不定宽文字跑马灯来回翻滚展现 — 父容器定宽,子元素不定宽

父容器不定宽度

当然,还没完。

假设父容器的宽度也是不固定的,或由于者 calc 兼容性问F 0 = + ( ! O题无法运用上述方法。那么,我们要做的就是,在一段固定的 CSS 代码中,既能运动其时元素的宽度,也能位移父容器的宽度。

正好,CSS 还真能完{ Z b b # s d成上述要求,我们改造一下 – 4 animation 的代码:

@keyframes move {
0% {
left: 0;
transform: translate(0, 0);
}
100% {
left: 100%;
transform: tran3 - Y k r Hslate(-100%, 0);
}
}
  • transformH 8 x ~ [ D M: translate(-100%, 0) 可以向左位移自身宽度的 100%
  • left: 100% 可以完结向右位移父容E 1 R G [ S x Y D器宽度的 100%

运用 margin-l_ N c 8 1 + I Geft 替换 left 也是相同可以完结的,运用百分比标明的 margin-left 位移的基准也是父元素~ 5 # 1 u K l y a的宽度。

这样,不论父容器宽度怎样,文H H j z v本元素宽度怎样,[ V s # Y7 f K l O 1 @ !可以完结对溢出文本适配翻滚展现。

  • 不定宽文字跑马灯来回翻h p o滚展现 — 父容器不定宽,子元素不定宽

部分不足之处

  1. 无法判别文本长度是否超出父元素宽度

* j c ~ h n #然,上述方案并非完美的方案,假设我们希望只针对本文长度溢出的状况,hover 的时分才进行翻滚,这一点在运用纯 CSS 的状况下是无法完结的。

我们无法经过 CSS 去判别其时元素长度是否大于父元1 H v D素长度再选择性的进行动画。终究 CSS 仅仅担任样式,不控制行为。所以实践运用中,或许还是需求凭借 Ja[ L g g D L ?vaScript 简略判别,然后经过一个 classN R A 进行控制。

  1. J ? l画闪耀

父容器不定宽度的状况下,由于需求一同对两个属性进行动画R j L w Z 8 W –,而且位移的方向是相反的,所以动画看上去会有一点闪耀。这个暂时没有找到特别好的处理方案。

最终

好了,本文到此结束,希望对E | _ 3 ` o x 你有协助 🙂

更多精彩 CSS 技术文章汇总在我的 Github — iCSS ,持续更新m 7 1 ; w W h ) J,欢迎k { & :点个 star 订阅保藏。

假设还有什么疑问或许建议,可以多多交流,原创文章,文笔有限,孤陋寡闻,文中若有不正之处,万望奉告。

发表评论

提供最优质的资源集合

立即查看 了解详情