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


Posted in HTML / CSS onMay 24, 2021

hover 时弹出框提示

一种可行的方案是在 hover 的时候,弹出一个文本框展示全文,最简单的就是在文本标签下添加 title 属性,填充我们需要的内容:

<ul>
    <li title="溢出文本1 溢出文本2 溢出文本3 溢出文本4">溢出文本1 溢出文本2 溢出文本3 溢出文本4</li>
</ul>

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

当然,这种方法简单但是可能缺乏点用户体验。

本文将简单介绍在文本长度不确定,容器长度也不确定的情况下,任意长度的文本实现 hover 状态下,从左向右,滚动到文本末端,再滚动回初始位置,如此反复,像是这样:

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

容器定宽,文本不定宽

我们先假设一下,我们的容器的宽度如果是固定的,但是不确定每条文本的宽度。

像是这样:

<div class="wrap">
    <p title="我的宽度是正常宽度">我的宽度是正常宽度</p>
    <p class="scroll" title="我的宽度是溢出了一小部分">我的宽度是溢出了一小部分</p>
    <p class="scroll" title="我的宽度是溢出了溢出了很大一部分">我的宽度是溢出了溢出了很大一部分</p>
</div>
.wrap {
    position: relative;
    width: 150px;
    overflow: hidden;
}
 
p {
     white-space: nowrap;
}

使用inline-block获取实际文本的宽度

由于<p>标签的宽度为父元素的 100%,如果是这样,我们很难进行下面的操作。我们首先需要拿到实际文本的宽度,这里可以借助inline-block的特性,做到这一点,我们改进下我们的 CSS:

p {
 +  display: inline-block;
    white-space: nowrap;
}

这样,当前<p>标签的实际宽度,其实就是整个文本元素的宽度。

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

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),嵌入动画中:

p:hover {
    animation: move 1.5s infinite alternate linear;
}
 
@keyframes move {
    0% {
        transform: translate(0, 0);
    }
    100% {
        transform: translate(calc(-100% + 150px), 0);
    }
}

至此,对于任意超出容器宽度的文本,我们都可以轻松的完成上述的效果。

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

不定宽文字跑马灯来回滚动展示 -- 父容器定宽,子元素不定宽

父容器不定宽度

当然,还没完。

如果父容器的宽度也是不固定的,或因为者calc兼容性问题无法使用上述方法。那么,我们要做的就是,在一段固定的 CSS 代码中,既能运动当前元素的宽度,也能位移父容器的宽度。

正巧,CSS 还真能完成上述要求,我们改造一下animation的代码:

@keyframes move {
    0% {
        left: 0;
        transform: translate(0, 0);
    }
    100% {
        left: 100%;
        transform: translate(-100%, 0);
    }
}
  • transform: translate(-100%, 0)能够向左位移自身宽度的 100%
  • left: 100%能够实现向右位移父容器宽度的 100%

使用margin-left替换left也是一样可以实现的,使用百分比表示的margin-left位移的基准也是父元素的宽度。

这样,不论父容器宽度如何,文本元素宽度如何,都可以实现对溢出文本适配滚动展示。

不定宽文字跑马灯来回滚动展示 -- 父容器不定宽,子元素不定宽

部分不足之处

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

当然,上述方案并非完美的方案,如果我们希望只针对本文长度溢出的情况,hover 的时候才进行滚动,这一点在使用纯 CSS 的情况下是无法实现的。

我们无法通过 CSS 去判断当前元素长度是否大于父元素长度再选择性的进行动画。毕竟 CSS 只是负责样式,不控制行为。所以实际使用中,可能还是需要借助 JavaScript 简单判断,然后通过一个 class 进行控制。

2.动画闪烁

在父容器不定宽度的情况下,由于需要同时对两个属性进行动画,并且位移的方向是相反的,所以动画看上去会有一点闪烁。这个暂时没有找到特别好的解决方案。

以上就是详解CSS不定宽溢出文本适配滚动的详细内容,更多关于CSS不定宽溢出文本适配滚动的资料请关注三水点靠木其它相关文章!

HTML / CSS 相关文章推荐
前端制作动画的几种方式(css3,js)
Dec 12 HTML / CSS
CSS3实现跳动的动画效果
Sep 12 HTML / CSS
分享CSS3中必须要知道的10个顶级命令
Apr 26 HTML / CSS
利用CSS3实现开门效果实例源码
Aug 22 HTML / CSS
css3使用animation属性实现炫酷效果(推荐)
Feb 04 HTML / CSS
CSS3+JavaScript实现炫酷呼吸效果的示例代码
Jun 15 HTML / CSS
5分钟弄清楚html5的drag and drop(小结)
Apr 10 HTML / CSS
突袭HTML5之Javascript API扩展3—本地存储全新体验
Jan 31 HTML / CSS
基于Modernizr 让网站进行优雅降级的分析
Apr 21 HTML / CSS
html5教你做炫酷的碎片式图片切换 (canvas)
Jul 28 HTML / CSS
AmazeUI折叠式卡片布局,整合内容列表、表格组件实现
Aug 20 HTML / CSS
CSS3 菱形拼图实现只旋转div 背景图片不旋转功能
Mar 30 HTML / CSS
如何在CSS中绘制曲线图形及展示动画
详解盒子端CSS动画性能提升
css背景和边框标签实例详解
详解CSS开发过程中的20个快速提升技巧
web前端之css水平居中代码解析
关于flex 上下文中自动 margin的问题(完整例子)
CSS的class与id常用的命名规则
You might like
PHP实现本地图片转base64格式并上传
2020/05/29 PHP
常用js脚本
2006/12/03 Javascript
javascript 带有滚动条的表格,标题固定,带排序功能.
2009/11/13 Javascript
如何确保JavaScript的执行顺序 之jQuery.html深度分析
2011/03/03 Javascript
使用jquery实现select添加实现后台权限添加的效果
2011/05/28 Javascript
JavaScript 函数replace深入了解
2013/03/14 Javascript
js打开windows上的可执行文件示例
2014/05/27 Javascript
JavaScript函数详解
2014/11/17 Javascript
AngularJS入门教程之静态模板详解
2016/08/18 Javascript
JavaScript 事件对内存和性能的影响
2017/01/22 Javascript
Vue实现自带的过滤器实例
2017/03/09 Javascript
基于jQuery的$.getScript方法去加载javaScript文档解析
2017/11/08 jQuery
基于vue-cli配置lib-flexible + rem实现移动端自适应
2017/12/26 Javascript
vue自定义js图片碎片轮播图切换效果的实现代码
2019/04/28 Javascript
环形加载进度条封装(Vue插件版和原生js版)
2019/12/04 Javascript
JS获取表格视图所选行号的ids过程解析
2020/02/21 Javascript
DWR内存兼容及无法调用问题解决方案
2020/10/16 Javascript
如何通过Proxy实现JSBridge模块化封装
2020/10/22 Javascript
Python实现读取目录所有文件的文件名并保存到txt文件代码
2014/11/22 Python
Python+微信接口实现运维报警
2016/08/27 Python
Win10下python3.5和python2.7环境变量配置教程
2018/09/18 Python
pycharm 2018 激活码及破解补丁激活方式
2020/09/21 Python
python中类与对象之间的关系详解
2020/12/16 Python
HTML5 在canvas中绘制矩形附效果图
2014/06/23 HTML / CSS
美国南部最大的家族百货公司:Belk
2017/01/30 全球购物
澳大利亚首屈一指的在线购物目的地:Kogan.com
2017/02/02 全球购物
俄罗斯茶和咖啡网上商店:Tea.ru
2021/01/26 全球购物
期末自我鉴定
2014/02/02 职场文书
小学师德师风整改措施
2014/10/27 职场文书
慰问信格式规范
2015/03/23 职场文书
感恩节寄语2015
2015/03/24 职场文书
2015年教研员工作总结
2015/05/26 职场文书
十二生肖观后感
2015/06/12 职场文书
Python FuzzyWuzzy实现模糊匹配
2022/04/28 Python
MySQL 原理优化之Group By的优化技巧
2022/08/14 MySQL
javascript中Set、Map、WeakSet、WeakMap区别
2022/12/24 Javascript