CSS/JQuery powered sideways scrolling text on hover

Question

I have a twitter feed on a website I run. However, it gets cut off on small screens. I have a bar tall enough for 1 line of text in which I have the latest tweet. I want the twe

Answer 1

My solution on jsfiddle or here at the end, it uses CSS3 Animations. I borrowed ideas from here and here. My idea was to let the container div, i.e. div.s to grow wide enough so that it can contain all the text, thus enabling the use of percentages for the left property in the @keyframes rule, hence the:

.s {
   display: inline-block;
}
.t:hover, .s:hover {
  width: auto;
}

Here is the code:

.t {
    white-space: nowrap;
    position: relative;
    overflow: hidden;   
    text-overflow: ellipsis;
    display: block;
    width: 100%;
}
.s {
  display: inline-block;
  width: 100%;
}
.t:hover, .s:hover {
  width: auto;
}
.s:hover .t { 
  animation: scroll 15s;
}
.f {
  width: 100px;
  background: red;
  overflow: hidden;
}
@keyframes scroll {
    0% {left: 0px;}
    100% {left: -100%;}                   
}

  

    
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id impedit accusamus nulla facilis unde sed ipsum maiores adipisci, eius excepturi saepe perspiciatis sequi optio ipsam odio quibusdam quo libero repudiandae.