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

2024-12-19 15:17:09

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位移的基准也是父元素的宽度。

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

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

部分不足之处

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

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

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

2.动画闪烁

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

以上就是详解CSS不定宽溢出文本适配滚动的详细内容，更多关于CSS不定宽溢出文本适配滚动的资料请关注我们其它相关文章！

CSS控制文本自动换行的问题

用表格做网页排版的时候,一般都能正常使用.偏偏有时会碰到一段连续的英文词或者一堆感叹号(!!!)把网页就撑开的现象:( 总结了一下,只要在CSS中定义了如下句子,可保网页不会再被撑开了. table{table-layout: fixed;} td(word-break: break-all; word-wrap:break-word;) 注释一下: 1.第一条table{table-layout: fixed;},此样式可以让表格中有!!!(感叹号)之类的字符时自动换行. 2.td{word-
CSS 美化段落文本之首字下沉

Selector:first-letter {font-size:2.5em; font-family:"楷体_GB2312"; font-weight:bold; line-height:1.2em; float:left; padding:5px 2px 0 0; color:#c00;} 如果你觉得还不是很清楚,那么这里就细细讲述一下: 首先要在HTML中有一段自己的文本,是在<p></p>中的也好,在其它块标签中都可以.给他个ID也好,class也好,直
文本框css关闭输入法

先点这个输入中文,以让输入法出来: 然后再点下边这个,看看是不是输入法被关闭了呢?本文字框输入法被关闭: 语法: style="ime-mode:disabled" 范例: <input type="text" name="jb51.net" style="ime-mode:disabled">
用CSS动态控制文本属性

本篇详细介绍了用CSS动态控制文本属性的文章主题,利用CSS的属性值可动态改变的特点,定义文本的多种属性值,再用一个事件来触发,一旦事件发生,则改变文本属性值,从而达到预期目的. 用CSS可以很方便地动态改变文本的属性,从而可制作出动态地使文字变大.缩小.改变文字颜色.改变文本的背景.字间距.行间距等等网页特效,一切都在你的掌握之中.是不是有点玄?事实就是如此.那一定很复杂吧?不!看完本文,你就会明白,原来这么简单. 请看下面的示例: 一.动态改变文字大小这个例子的效果是:一段文本,当鼠标在这
css文本框与按钮美化效果代码

一.先看看在网页中经常出现的按钮与文本框的本来面目吧! 对照上图,我们怎么样才能改变文本框与按钮的模样呢?那在下面我为大家提供两种文本框与按钮样式作为例子参考,第一种是文本框与按钮无立体感,只是有线条颜色与填充颜色的,这种效果大家可能在很多网站上都看见过,给人一种特别的感觉,很不错的,第二种效果就比较特殊了,是将文本框做成一种类似于下划线的效果并且是彩色的,同时按钮的背景色也不再是灰色,而是彩色的,可以说这是一种非常酷的效果,好了,下面我就来说说这两种效果实现的详细操作步骤吧. 二.无立体效
用css实现隐藏文本框

方法1 本来的文本框是 <input type="text" value="" /> 加上 <input type="text" value="" style="display:none;" /> 方法2 <input type="hidden" />
CSS渐变文本效果的两种方法比较

是否想不用photoshop来创建一个带渐变的标题文字吗? 这里用一个简单的css技巧来向你展示如何仅仅使用css和png图片来制造这种效果. 经测试这种方法适合大多数主流浏览器.当然, IE6需要一个支持透明PNG的Hack(值得庆幸的是微软正在极力的将用户的IE6自动升级到IE7^.^, 延伸阅读:Warning: An IE7 Auto-Update Is Coming Soon) 优势这是纯粹的css技巧,没有使用任何ja脚本或者flash, 并且它可以在大多数浏览器上正常工作(IE6
CSS小例子(只显示下划线的文本框，像文字一样的按钮)

只显示下划线的文本框,像文字一样的按钮 body{ background-color:#daeeff; /* 页面背景色 */ } form{ margin:0px; padding:0px; font:14px; } input{ font:14px Arial; } .txt{ color:#005aa7; border-bottom:1px solid #005aa7; /* 下划线效果 */ border-top:0px; border-left:0px; border-right:0p
使用JavaScript和CSS实现文本隔行换色的方法

先来看一个简单的方法. 在 css 中定义两种样式 .odd{...} 和 .even{...} 分别用于奇数行和偶数行的不同背景颜色.在网页加载后通过 javascript 获取要变色的标签列表,执行如下代码: // 当文件加载时,执行代码. window.onload = function() { // 获取<ul id="list" />对象 var list = document.getElementById('list'); // 获取list下面的所有li va
详解CSS不定宽溢出文本适配滚动

hover 时弹出框提示一种可行的方案是在 hover 的时候,弹出一个文本框展示全文,最简单的就是在文本标签下添加 title 属性,填充我们需要的内容: <ul> <li title="溢出文本1 溢出文本2 溢出文本3 溢出文本4">溢出文本1 溢出文本2 溢出文本3 溢出文本4</li> </ul> 当然,这种方法简单但是可能缺乏点用户体验. 本文将简单介绍在文本长度不确定,容器长度也不确定的情况下,任意长度的文本实现 hove
详解CSS开发过程中的20个快速提升技巧

1.使用CSS重置(reset) css重置库如normalize.css已经被使用很多年了,它们可以为你的网站样式提供一个比较清晰的标准,来确保跨浏览器之间的一致性. 大多数项目并不需要这些库包含的所有规则,可以通过一条简单的规则来应用于布局中的所有元素,删除所有的margin.padding改变浏览器默认的盒模型. *{box-sizing:border-box;margin:0;padding:0} 使用box-sizing声明是可选择,如果你使用下面继承的盒模型形式可以跳过它. 2.继承
详解CSS故障艺术

概述本文的主题是 Glitch Art,故障艺术. 什么是故障艺术?我们熟知的抖音的 LOGO 正是故障艺术其中一种表现形式.它有一种魔幻的感觉,看起来具有闪烁.震动的效果,很吸引人眼球. 故障艺术它模拟了画面信号出现故障导致成像错误的感觉.青色色块与红色色块无法重合就是这种故障的体现.从胶片时代开始到今天的数码时代,这种故障一直是观众非常熟悉的现象.即使抖音的 LOGO 只是静态的,大脑也会自己补完整个效果,甚至还会自己脑补信号干扰的噪音. 使用混合模式实现抖音 LOGO 首先从静态的开始,
详解CSS不受控制的position fixed

失效的 position:fixed 在许多情况下,position:fixed将会失效.MDN用一句话概括了这种情况: 当元素祖先的 transform 属性非 none 时,定位容器由视口改为该祖先. What!还有这种操作?可能有部分同学还没 get 到上面这句话的意思,通俗的讲就是指定了position:fixed的元素,如果其祖先元素存在非 none 的 transform 值 ,那么该元素将相对于设定了transform的祖先元素进行定位. 那么,为什么会发生这种情况呢?说好的相对视
详解CSS伪元素的妙用单标签之美

:before和::before的区别在介绍具体用法之前,简单介绍下伪类和伪元素.伪类大家听的多了,伪元素可能听到的不是那么频繁,其实 CSS 对这两个是有区分的. 有时你会发现伪类元素使用了两个冒号 (::) 而不是一个冒号 (:),这是 CSS3 规范中的一部分要求,目的是为了区分伪类和伪元素,大多数浏览器都支持这两种表示方式. #id:after{ ... } #id::after{ ... } 单冒号(:)用于 CSS3 伪类,双冒号(::)用于 CSS3 伪元素.对于 CSS2 中已
详解CSS样式中的!important、*、_符号

详解CSS样式中的!important.*._符号 !important.*._其实没什么用,皆是用来设置样式的优先级,但是样式的优先级你可以自行排好其先后位置来设置,然而你还是要看懂的. 我们知道,CSS写在不同的地方有不同的优先级, .css文件中的定义 < 元素style中的属性,但是如果使用!important,事情就会变得不一样. 首先,先看下面一段代码: <!DOCTYPE HTML> <html> <head> <meta http-equiv
详解Vue.js 可拖放文本框组件的使用

可拖放文本框允许用户通过拖动备选项至文本框来确定输入,其实也可以说是 combobox 的一种变形. 与 combobox 相比,这种组件能让用户更加直观的看到所有备选项,并且可以是多个输入共用一组备选项. 类似的组件也曾用在 3D Windrose App,Graph Maker App 等多个 app 里. 注册组件注册可拖放文本框组件(其实就是将封装好的这部分代码 Ctrl+C and Ctrl+V). <script type="text/x-template" id=
详解CSS玩转图片Base64编码

什么是 base64 编码? 我不是来讲概念的,直接切入正题,图片的 base64 编码就是可以将一副图片数据编码成一串字符串,使用该字符串代替图像地址. 这样做有什么意义呢?我们知道,我们所看到的网页上的每一个图片,都是需要消耗一个 http 请求下载而来的(所有才有了 csssprites 技术的应运而生,但是 csssprites 有自身的局限性,下文会提到). 没错,不管如何,图片的下载始终都要向服务器发出请求,要是图片的下载不用向服务器发出请求,而可以随着 HTML 的下载同时下载到本
用css截取字符的几种方法详解（css排版隐藏溢出文本）

方法一: 复制代码代码如下: <div style="width:300px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;"> 任意长度的字符串 </div> 说明:优点是内容可以为任何HTML元素,包括超链接和图片等,在IE6中还会在结尾自动显示省略号.缺点是必须指定宽度数值,并且宽度不能是百分数,否则在IE中会被认为是字符总长的百分比. 方法二: 复制代码代码如下: <
详解jQuery UI库中文本输入自动补全功能的用法

自动补全(autocomplete),是一个可以减少用户输入完整信息的UI 工具.一般在输入邮箱.搜索关键字等,然后提取出相应完整字符串供用户选择. 一．调用autocomplete()方法 $('#email').autocomplete({ source : ['aaa@163.com', 'bbb@163.com', 'ccc@163.com'], }); 二．修改autocomplete()样式由于autocomplete()方法是弹窗,然后鼠标悬停的样式.通过Firebug