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=