CSS 技巧一则 -- 不定宽溢出文本适配滚动
在日常布局当中,肯定经常会遇到文本内容超过容器的情况。非常常见的一种解决方案是超出省略。
但是,有的时候,由于场景的限制,可能会出现在一些无法使用超出打点省略的方法的场景,譬如在导航栏中:
这种情况下,在容器定宽但是文本又溢出且不能换行的情况下,我们就需要寻求另外的解决方案。
hover 时弹出框提示
一种可行的方案是在 hover 的时候,弹出一个文本框展示全文,最简单的就是在文本标签下添加 title 属性,填充我们需要的内容:
<ul>
<li title="溢出文本1 溢出文本2 溢出文本3 溢出文本4">溢出文本1 溢出文本2 溢出文本3 溢出文本4</li>
</ul>
当然,这种方法简单但是可能缺乏点用户体验。
本文将简单介绍在文本长度不确定,容器长度也不确定的情况下,任意长度的文本实现 hover 状态下,从左向右,滚动到文本末端,再滚动回初始位置,如此反复,像是这样:
容器定宽,文本不定宽
我们先假设一下,我们的容器的宽度如果是固定的,但是不确定每条文本的宽度。
像是这样:
<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>
标签的实际宽度,其实就是整个文本元素的宽度。
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);
}
}
至此,对于任意超出容器宽度的文本,我们都可以轻松的完成上述的效果。
父容器不定宽度
当然,还没完。
如果父容器的宽度也是不固定的,或因为者 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
位移的基准也是父元素的宽度。
这样,不论父容器宽度如何,文本元素宽度如何,都可以实现对溢出文本适配滚动展示。
部分不足之处
- 无法判断文本长度是否超出父元素宽度
当然,上述方案并非完美的方案,如果我们希望只针对本文长度溢出的情况,hover 的时候才进行滚动,这一点在使用纯 CSS 的情况下是无法实现的。
我们无法通过 CSS 去判断当前元素长度是否大于父元素长度再选择性的进行动画。毕竟 CSS 只是负责样式,不控制行为。所以实际使用中,可能还是需要借助 JavaScript 简单判断,然后通过一个 class 进行控制。
- 动画闪烁
在父容器不定宽度的情况下,由于需要同时对两个属性进行动画,并且位移的方向是相反的,所以动画看上去会有一点闪烁。这个暂时没有找到特别好的解决方案。
最后
好了,本文到此结束,希望对你有帮助 :)
更多精彩 CSS 技术文章汇总在我的 Github -- iCSS ,持续更新,欢迎点个 star 订阅收藏。
如果还有什么疑问或者建议,可以多多交流,原创文章,文笔有限,才疏学浅,文中若有不正之处,万望告知。
CSS 技巧一则 -- 不定宽溢出文本适配滚动的更多相关文章
- css实现div不定宽高垂直水平居中解决方案
在项目中我们经常能碰见然图片垂直水平居中,不定宽高的div垂直水平居中,等等~~ 现在我将介绍我所知道的几种用css来解决的几种方案. 1.父元素text-align:center;display:t ...
- CSS基础:text-overflow:ellipsis溢出文本
<!DOCTYPE html><html> <head> <title> new document </title> <meta na ...
- CSS基础:text-overflow:ellipsis溢出文本显示省略号的详细方法_CSS教程
4要素: width: 125px; //宽度必须 text-overflow: ellipsis/clip; //省略号或裁剪: white-space: nowrap;//强制内容在一行显示; ...
- CSS 单行溢出文本显示省略号...的方法(兼容IE FF)(转)
http://www.52css.com/article.asp?id=602 =================================================== html ...
- css 溢出文本显示省略号
这个标题其实已经是一个老生常谈的问题了.很多时候,比如网站最基本的文章列表,标题会很长,而显示列表的区域宽度却没有这么宽,这时候最正常的做法就是 让超出宽度的部分文字用省略号(…)来表示.通常做法是网 ...
- CSS中不定宽块状元素的水平居中显示
CSS中不定宽块状元素的水平居中显示 慕课网上的HTML/CSS教程 http://www.imooc.com/view/9 其中有三种方法 第一种是加入table标签 任务是实现div元素的水平居中 ...
- Css动画形式弹出遮罩层,内容区上下左右居中于不定宽高的容器中
<!DOCTYPE html> <html> <head> </head> <body id="body"> <! ...
- 新公司入职第一天遇到的 关于 CSS 单行溢出文本显示省略号...的问题
上班第一天 前端岗位,因为公司这个项目是标准开发 所以没法用框架在打架页面,好吧 我手写 各种div 各种css样式 好不忧伤,好吧 不废话了 进入正题. 想在导航栏中的 客户信息 功能点 实现溢出用 ...
- CSS溢出文本省略(text-overflow)
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
随机推荐
- java中的四种访问权限是?
1.私有权限(private) private可以修饰数据成员,构造方法,方法成员,不能修饰类(此处指外部类,不考虑内部类).被private修饰的成员,只能在定义它们的类中使用,在其他类中不能调用. ...
- 利用oracle数据库闪回功能将oracle数据库按时间点恢复
oracle更新脚本把原数据冲了,并且没有备份,急煞我也 解决办法: oracle数据库有闪回功能: select * from tab 可以查出已被删除的表 ...
- 《UNIX环境高级编程》(APUE) 笔记第五章 - 标准I/O库
5 - 标准I/O库 Github 地址 1. 标准 I/O 库作用 缓冲区分配 以优化的块长度执行 I/O 等 使用户不必担心如何选择使用正确的块长度 标准 I/O 最终都要调用第三章中的 I/O ...
- python之浅谈数据类型
什么是数据类型 数据类型指的就是变量值的不同类型,姓名可能是一种数据类型.年龄可能是一种数据类型.爱好可能又是另一种数据类型,至于是什么数据类型我们将在下一章详细说明. 如何对数据分类 变量的是用 ...
- 二.drf之使用序列化编写视图
总结:两功能序列化: a.拿到queryset --->idc = Idc.objects.all() b.将queryset给序列化成类---->serializer = IdcSeri ...
- Redis为何是单线程的
以前一直有个误区,以为:高性能服务器 一定是 多线程来实现的 原因很简单因为误区二导致的: 多线程 一定比 单线程 效率高.其实不然. redis 核心就是 如果我的数据全都在内存里,我单线程的去操作 ...
- composer更新命令及常用命令
原文地址:https://www.wjcms.net/archives/composer更新命令及常用命令 composer作为php的包依赖管理工具,开发者将开发的工具包上传,然后使用者能很方便的使 ...
- postcss.config.js not found
https://github.com/ElemeFE/element/issues/10249
- CF819B Mister B and PR Shifts 思维题
分析 这道题\(n\leq10^{6}\),显然\(n^{2}\)的暴力是无法解决问题的 那么我们可以考虑数列的某一种性质 因为最终的答案是\(\sum{n \atop i=1} |p_i - i|\ ...
- Git篇---将秘钥添加到github
第1步:创建SSH Key.在用户主目录下,看看有没有-/.ssh目录,如果有,再看看这个目录下有没有id_rsa和id_rsa.pub这两个文件,如果已经有了,可直接跳到下一步.如果没有,打开She ...