Question

尝试使此div中的文本一直滚动以向用户显示任何溢出。

select mai.msisdn, mai.firstname, mai.lastname, type as account_type,
    alias as nickname, mai.regdate, mai.status,
    amount as balance, count(trai.referenceid) as number_of_transactions,
    sum(trai.amount) as sum_of_transactions 
from tableA mai
inner join tableC stk
   on mai.msisdn = stk.msisdn 
      and stk.walletid = 0
left join tableB trai
   on (mai.msisdn = trai.tomsisdn or mai.msisdn = trai.frmsisdn)
      and trai.status = 0     
group by mai.msisdn, mai.firstname, mai.lastname, mai.type,
mai.alias, mai.regdate, mai.status,
stk.amount;

以上是可能会溢出容器的免责声明示例。免责声明可以改变，可以更长甚至更短。有没有办法有条件地设置p标签的动画来滚动标签的内容（如果它对容器来说太大了），然后在动画完成后返回到正常的显示位置，椭圆会溢出？< / p>

这是我目前工作的代码笔。

http://codepen.io/anon/pen/EZEzXr

Answer 1

我已将动画设置为完全指定转换和右移动。我已经简化了供应商特定的样式，现在它们并不是很需要

希望这就是你想要的

.container {
  width: 200px;
  overflow: hidden;
}
.container p {
  position: relative;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  animation: scroll-left 6s linear 1;
}
@keyframes scroll-left {
  0% {
    overflow: visible;
    right: 0px;
    transform: translateX(0%);
  }
  90%,
  100% {
    overflow: visible;
    right: 100%;
    transform: translateX(-100%);
  }
}

<div class="container">
  <p>Please dont feed the gold fish, they will turn into gremlins and destroy everything they see</p>
</div>

Answer 2

问题是在CSS中无法获得p元素溢出的宽度（据我所知）。你愿意使用Javascript吗？

<html>
<head>
    <style>
        .container{
            width:200px;
            white-space:nowrap;
            overflow:hidden;
        }
        .container p{
            left:100%;
            position:relative;
            transition:left 5s; 
        }
    </style>
</head>
<body>
    <div class="container">
        <p id="test">Please dont feed the gold fish, they will turn into gremlins and destroy everything they see</p>
    </div>
    <script>
        var e = document.getElementById("test");
        e.offsetHeight;
        e.style.left = e.parentElement.clientWidth - e.scrollWidth + "px";
        e.addEventListener("transitionend", () => e.style.left = "0px");
    </script>
</body>
</html>

如何使文本滚动然后正常显示

2 个答案: