javascript - 使用 css 过渡显示文本溢出(从右到左)

Question

我是编码新手，所以请多多关照 :) 我试图在鼠标悬停时显示隐藏的文本。 我想要从右到左的过渡，但只有在实际上有一些隐藏/省略文本的地方(我不知道它有多长)

我有这样的东西:

<div class="card">
 <div class="text-box">
   <h1> /*injected text*/ </h1>
 </div>
</div>

样式:

.text-box {
    background-color: blue;
    color:white;
}

h1 {

    text-overflow: ellipsis;
    overflow: hidden;
    @include transition(left 4s linear);
    overflow-x: hidden;
    position: relative;
    right: 0px;
}


.card:hover h1, .card:active h1 {
    right:100px;
    overflow: visible;

}

我需要与第三个类似的东西，但仅适用于省略号

https://codepen.io/yurigor/pen/mAPkWP

谢谢

Answer 1

这是您只需要来自该代码笔片段的代码

html

<div class="marquee bluebox">
  <span><span>Hover over or touch me to see animated scrolling of this string. Fancy but buggy. May be still can be improved.</span></span>
</div>

CSS

.bluebox, .stuff {
  box-sizing: border-box;
  padding: 5px;
  width: 300px;
  border: 1px blue solid;
  background-color: rgba(0, 0, 255, 0.4);
  margin-bottom: 5px;
  float: left;
}
.marquee {
  white-space: nowrap;
  overflow: hidden;
}
.marquee span {
  display: inline-block;
  width: 100%;
}
.marquee span span {
  transition: left 4s linear;
  position: relative;
  overflow: hidden;
  text-overflow: ellipsis;
  left: 0px;
}
.marquee:active span, .marquee:hover span {
  width: auto;
}
.marquee:active span span, .marquee:hover span span {
  left: calc(300px - 15px - 100%);
}

这是一个演示 https://jsbin.com/dukukid/edit?html,css,output