鼠标悬停判断超出容器的文字向左滚动的两种实现方法

先来说清楚我的情况，如下图，为了使页面更加美观也更好写响应式，我没有采用瀑布流形式，而是每个li都是固定大小，这么一来，标题高度固定，如果有超出标题容器的文字就得隐藏，但我又想让用户看到所有标题文字，这就想到悬停文字向左滚动了。

html代码如下：

<ul>
  <li>
    <div class="total">
      <div class="thumb"><a href="#" target="_blank"><img src="images/slt.jpg"></a></div>
      <div class="trw">
        <h2><a href="#" target="_blank">北京花卉</a></h2>
        <p><span>5</span><span>2019-09-03</span><span>魏义齐</span></p>
      </div>
    </div>
  </li>
</ul>

解释一下：class="total"的div用于写响应式li为百分比时在li里居中的；class="thumb"为缩略图的盒子，一般图片会加个放大特效或者闪光特效，这个盒子就用来隐藏溢出的图片或添加伪类的；class="trw"为上图中的边框，li的宽度为232px，class="trw"的div宽度就是230px；h2是标题。

重要部分css样式如下（我没有写兼容）：

ul li .total .trw {
	width: 230px;
	border: solid 1px #c6c4c4;
}
ul li .total .trw h2 {
	width: 220px;
	margin: auto;
	height: 30px;
	line-height: 30px;
	white-space: nowrap;/*禁止分行才有超出的文字*/
	overflow: hidden;/*隐藏超出文字*/
	position: relative;/*a元素定位参考*/
}
ul li .total .trw h2 a {
	color: #333;
	font-weight: normal;
}
ul li .total:hover .trw h2 a {
	color: #3B77B3;
	animation: title 2s;/*运动对象和运动时间*/
	animation-fill-mode: forwards;/*停留在最后一帧*/
	animation-timing-function: linear;/*匀速运动*/
}
@keyframes title {/*运动轨迹*/
 0% {
 right: -100%;
}
 100% {
 right: 0;
}
}

a要相对于h2定位h2就要写样式position: relative，那么a怎么写position:absolute呢？肯定不能全部都写，因为不是所有a元素的长度都会超出h2容器，这里需要用jquery做一个判断，如果a的宽度大于220px就给它加上position:absolut，如果a的宽度小于等于220px则不加position:absolut，如此动画就不会作用于没有position:absolut的a元素。

jQuery判断代码如下：

$(document).ready(function () {
	$(".total").hover(function () {
		var title = $(this).find(".trw h2 a").width();
		if (title > 220) {
			$(".trw h2 a").css("position", "absolute");
		} else {
			$(".trw h2 a").css("position", "static");
		}
	})
})

上面样式@keyframes中0%时right距离应该为负的a元素的长度减去h2容器的宽度，但是标题的长度是不固定的，所以a元素的长度也是未知的，所以right距离不能是具体的像素，索性就给个-100%吧，虽然效果并不是从文字截断的地方往左移（本案例中截断的文字是“见”，正常逻辑是从“见”字往左移），但也差不多。

点这里预览案例，点这里测试代码。

另外一种就是jquery插件，插件的效果倒是很完美，但是引入了两个js文件，多了两个http请求，这不是我想要的，第一种方法的jquery代码完全可以放在网站通用的js文件里，不占用多余的http请求，并且做到了用css代码和极少的js实现效果。

插件预览：https://blog.weiyiqi.net/lookdoc/jquerytextroll/

插件下载：

很多问题的解决都在于思路，就比如本文的动画，我一开始想到的就是纯css实现而不是借助jquery插件，这可能跟我经常做网站优化有关，想用css实现就想怎么用css实现，当你的基本功够扎实你脑子里就会有思路，跟着自己的思路走，问题解决了是非常有成就感的，本文案例尽管最终还是借助了jquery，但也只是一小段不得不用的。在本站的html+css栏目和综合应用栏目有几篇文章均基于少用插件、少写js的思路解决问题，特此我整理了一个tag，想提高自己html架构和css思维的朋友建议看看：html架构和css思维。