• 售前

  • 售后

热门帖子
入门百科

详解CSS不定宽溢出文本适配滚动

[复制链接]
米老鼠和蓝精鼠v 显示全部楼层 发表于 2021-8-16 12:01:17 |阅读模式 打印 上一主题 下一主题
目次


  • hover 时弹出框提示
  • 容器定宽,文本不定宽

    • 利用inline-block获取现实文本的宽度
    • 算出滚动距离,举行滚动

  • 父容器不定宽度
  • 部分不足之处

hover 时弹出框提示

一种可行的方案是在 hover 的时间,弹出一个文本框展示全文,最简朴的就是在文本标签下添加 title 属性,添补我们需要的内容:
  1. <ul>
  2.     <li title="溢出文本1 溢出文本2 溢出文本3 溢出文本4">溢出文本1 溢出文本2 溢出文本3 溢出文本4</li>
  3. </ul>
复制代码

固然,这种方法简朴但是大概缺乏点用户体验。
本文将简朴介绍在文本长度不确定,容器长度也不确定的情况下,任意长度的文本实现 hover 状态下,从左向右,滚动到文本末端,再滚动回初始位置,如此反复,像是如许:


容器定宽,文本不定宽

我们先假设一下,我们的容器的宽度假如是固定的,但是不确定每条文本的宽度。
像是如许:
  1. <div class="wrap">
  2.     <p title="我的宽度是正常宽度">我的宽度是正常宽度</p>
  3.     <p class="scroll" title="我的宽度是溢出了一小部分">我的宽度是溢出了一小部分</p>
  4.     <p class="scroll" title="我的宽度是溢出了溢出了很大一部分">我的宽度是溢出了溢出了很大一部分</p>
  5. </div>
复制代码
  1. .wrap {
  2.     position: relative;
  3.     width: 150px;
  4.     overflow: hidden;
  5. }
  6. p {
  7.      white-space: nowrap;
  8. }
复制代码
利用inline-block获取现实文本的宽度

由于<p>标签的宽度为父元素的 100%,假如是如许,我们很难举行下面的操作。我们首先需要拿到现实文本的宽度,这里可以借助inline-block的特性,做到这一点,我们改进下我们的 CSS:
  1. p {
  2. +  display: inline-block;
  3.     white-space: nowrap;
  4. }
复制代码
如许,当前<p>标签的现实宽度,实在就是整个文本元素的宽度。

Tips:这里没有利用display: inline是由于下文我们需要让 p 元素滚动起来需要用到 transform,但是 transform 是无法作用在内联元素之上的。具体可以参考规范:transformable element

算出滚动距离,举行滚动

如许,我们有了父元素的宽度150px,文本的宽度。那么很轻易得到需要滚动的距离:
需要滚动的距离 S = 溢出的文本元素的宽度 - 父元素的宽度
如许,我们只需要找到一个可以表现而且当前文本宽度是变量值即可。便是 --transoform。
由于在利用 transform: translate() 举行位移的时间,假如利用百分比表现,那么百分比的基准元素是元素本身,也就是假如我们transform: translate(100%, 0),实在表现的就是向右移动一个元素本身宽度的距离。
那么我们可以借助 calc 非常轻易的拿到我们上述的需要滚动的距离 S --transform: translate(calc(-100% + 150px), 0),嵌入动画中:
  1. p:hover {
  2.     animation: move 1.5s infinite alternate linear;
  3. }
  4. @keyframes move {
  5.     0% {
  6.         transform: translate(0, 0);
  7.     }
  8.     100% {
  9.         transform: translate(calc(-100% + 150px), 0);
  10.     }
  11. }
复制代码
至此,对于任意超出容器宽度的文本,我们都可以轻松的完成上述的结果。

不定宽笔墨赛马灯来回滚动展示 -- 父容器定宽,子元素不定宽

父容器不定宽度

固然,还没完。
假如父容器的宽度也是不固定的,或由于者calc兼容性问题无法利用上述方法。那么,我们要做的就是,在一段固定的 CSS 代码中,既能运动当前元素的宽度,也能位移父容器的宽度。
正巧,CSS 还真能完成上述要求,我们改造一下animation的代码:
  1. @keyframes move {
  2.     0% {
  3.         left: 0;
  4.         transform: translate(0, 0);
  5.     }
  6.     100% {
  7.         left: 100%;
  8.         transform: translate(-100%, 0);
  9.     }
  10. }
复制代码
       
  • transform: translate(-100%, 0)可以或许向左位移自身宽度的 100%   
  • left: 100%可以或许实现向右位移父容器宽度的 100%
利用margin-left更换left也是一样可以实现的,利用百分比表现的margin-left位移的基准也是父元素的宽度。
如许,岂论父容器宽度怎样,文本元素宽度怎样,都可以实现对溢出文本适配滚动展示。
不定宽笔墨赛马灯来回滚动展示 -- 父容器不定宽,子元素不定宽

部分不足之处

1.无法判定文本长度是否超出父元素宽度
固然,上述方案并非完满的方案,假如我们盼望只针对本文长度溢出的情况,hover 的时间才举行滚动,这一点在利用纯 CSS 的情况下是无法实现的。
我们无法通过 CSS 去判定当前元素长度是否大于父元素长度再选择性的举举措画。究竟 CSS 只是负责样式,不控制举动。以是现实利用中,大概还是需要借助 JavaScript 简朴判定,然后通过一个 class 举行控制。
2.动画闪烁
在父容器不定宽度的情况下,由于需要同时对两个属性举举措画,而且位移的方向是相反的,以是动画看上去会有一点闪烁。这个临时没有找到特别好的办理方案。
以上就是详解CSS不定宽溢出文本适配滚动的具体内容,更多关于CSS不定宽溢出文本适配滚动的资料请关注脚本之家其它相关文章!

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x

帖子地址: 

回复

使用道具 举报

分享
推广
火星云矿 | 预约S19Pro,享500抵1000!
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

草根技术分享(草根吧)是全球知名中文IT技术交流平台,创建于2021年,包含原创博客、精品问答、职业培训、技术社区、资源下载等产品服务,提供原创、优质、完整内容的专业IT技术开发社区。
  • 官方手机版

  • 微信公众号

  • 商务合作