提示-巧妙实现可变宽度溢出文本循环滚动显示

.wrap{position:relative;width:150px;overflow:hidden;}p{white-space:nowrap;}使用inline-block获取实际文本的宽度，因为

标签的宽度是父元素的100%，如果是这样，我们很难进行以下操作。我们首先需要获取实际文本的宽度。在这里，我们可以使用内联块功能来执行此操作。改进一下我们的CSS：p{+display:inline-block;white-space:nowrap;}这样，当前标签的实际宽度实际上就是整个文本元素的宽度。Tips：这里没有使用display:inline，因为我们需要使用transform来滚动下面的p元素，但是transform不能应用于inline元素。详见规范：变形元素计算滚动距离并进行滚动。这样我们就有了父元素150px的宽度和文字的宽度。那么滚动距离就很容易得到了：滚动距离S=溢出文本元素的宽度-父元素的宽度。这样，我们只需要找到一个可以表示且当前文本宽度为变量值即可。那就是——变换。因为在使用transform:translate()进行位移的时候，如果使用百分比的话，百分比的参考元素就是元素本身，也就是说如果我们transform:translate(100%,0)，其实就是移动一个元素向右自身宽度的距离。然后我们可以使用calc很容易的得到我们需要滚动的距离S——transform:translate(calc(-100%+150px),0),嵌入动画中：p:hover{animation:move1.5sinfinitealternatelinear;}@keyframesmove{0%{transform:translate(0,0);}100%{transform:translate(calc(-100%+150px),0);}}到目前为止，对于任何超过容器，我们就可以轻松实现以上效果。可变宽度文本跑马灯来回滚动——父容器固定宽度，子元素可变宽度，父容器可变宽度当然，这还没完。如果父容器的宽度不固定，或者因为calc兼容性问题，则无法使用上述方法。那么，我们要做的就是，在固定的CSS代码中，我们不仅可以移动当前元素的宽度，还可以移动父容器的宽度。巧合的是，CSS确实可以满足以上需求，我们来改造一下动画代码：@keyframesmove{0%{left:0;transform:translate(0,0);}100%{left:100%;transform:translate(-100%,0);}}transform:translate(-100%,0)可以向左移动自身宽度的100%left:100%可以向右移动父容器宽度的100%也可以将left替换为margin-left实现，margin-left位移百分比表示的依据也是父元素的宽度。这样无论父容器的宽度还是文本元素的宽度，都可以适配溢出文本的滚动显示。不定宽度文本选取框来回滚动——父容器宽度不定，子元素宽度不定。一些不足1.无法判断文本长度是否超过父元素的宽度。在overflow的情况下，只有在hover的时候才进行滚动，纯CSS的情况下是无法实现的。我们不能通过CSS来判断当前元素的长度是否大于父元素的长度，然后选择性的进行动画处理。毕竟CSS只负责样式，而不负责行为。所以在实际使用中，可能还是需要使用JavaScript进行简单的判断，然后通过一个类来控制。2、动画闪烁在父容器宽度可变的情况下，由于需要同时对两个属性进行动画处理，而且位移方向相反，所以动画看起来有点闪烁。我还没有找到一个特别好的解决方案。最后，本文到此结束，希望对大家有所帮助：）参考文献[1]可变换元素：https://drafts.c??sswg.org/css-transforms-1/#transformable-element[2]可变宽度文本跑马灯来回滚动——父容器宽度固定，子元素宽度可变：https://codepen.io/Chokcoco/pen/QWyoMrx[3]文本跑马灯来回滚动--父容器宽度可变，子元素宽度可变：https://codepen.io/Chokcoco/pen/oNbVGrd[4]Github--iCSS：https://github.com/chokcoco/iCSS