Question

我是编码新手，所以请对我好：) 我试图在鼠标悬停时显示隐藏的文本。我想从右到左进行翻译，但仅在实际上存在一些隐藏/省略的文本的地方（我不知道要多长时间）

我有这样的东西：

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

css：

.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

这是您仅需要该Codepen代码段中的代码

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

Answer 2

对css代码进行了少量修改，以避免在文本返回初始位置时进行过渡。尽管我强烈建议您学习SASS，因为它会使您在链接中看到的代码片段更短。

/*this function take a DOM element as an input, test if this element have an overflow 
and then apply ellipsis and transition to it if its the case*/
function transitionEllipsised(element, textToAdd){
  /*get the jQuery collection of this element to use jQuery innerHeight and innerWidth
  methods on it and add the text to it*/
  var $element = $(element).text(textToAdd);
  //if the text did overflow in the width or the height of the container apply ellipsis transition
  if (element.scrollHeight > $element.innerHeight() 
   || element.scrollWidth > $element.innerWidth()) {

    var innerHtml = $element.html();
    //add marquee class to the element it will hide the overflow
    $element.addClass("marquee")
    //wrap the element in the two spans that will create the transition effect
    .html(`<span><span>${innerHtml}</span></span>`);
  }
}

//this is an example to use the function transitionEllipsised
/*when user click on the button the text on the input will be added to the h1 element
and apply transition only if text overflow*/
$("button.add-text").click(function(){
  var headerExample = document.querySelector("h1.header-example");
  //get the text of the user input
  var textToAdd = $("input.text-to-add").val();
  transitionEllipsised(headerExample, textToAdd);
});

/*hide overflow*/
.marquee{
  white-space:nowrap;
  overflow: hidden;
}
/*the css that you need to do the transition effect*/
.marquee span{
  display: inline-block;
  width: 100%;
}
.marquee span span{
  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{
  transition: left 4s linear;
  left: calc(300px - 15px - 100%);
}
/*header of the example*/
h1.header-example{
  /*important to fix the width and height of the container. if the text is longer the 300px there will be an overflow*/
  width: 300px;
  height: 40px;
  border: red solid 1px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<!-- this is an example to use the function transitionEllipsised -->
<p>add some text using the input. if the text is longer then the container there will be transition effect to show the overflow</p>
<input type="text" class="text-to-add"><button class="add-text">add text</button>
<h1 class="header-example"></h1>

使用CSS过渡（从右到左）显示文本溢出

2 个答案: