Webkit marquee only scroll when necessary

Question

I've got a question concerning webkit marquee. I've got 2 elements of a variable width. (The 2 elements are the same width), and both elements need to be a marquee.

However when the content has overflow (is larger then the element) I need a marquee, if not the text should remain as it is (no scrolling).

I've created a JSFiddle as an example: http://jsfiddle.net/Vxwed/:

The long and short both need to be marquee'd through CSS3, while the long should scroll and the short one doesn't.

<p class="long">Hi my name is John Doe</p>
<p class="short">Yeah!</p>

Remember, the contents of the elements are variable (filled with javascript), so I cant do actual hardcoding on the elements marquee-behaviour.

Any CSS experts here able to help me? I've been researching this a lot but there is little information about this subject, since it's relatively new.

The only solution that I'm able to think of right now is using jQuery to measure the width of the elements, and then calculate if they need extra spacing. If they need apply marquee, else don't. But that doesn't seem very clean to me, I'd rather do this in HTML/CSS only if possible.

Answer 1

This probably doesn’t do exactly what you want but it was a good problem to look at: http://jsfiddle.net/4hgd8ac1/

It uses CSS animations to animate the transform: translateX percentage as this is based off the width of the element itself. This means we can scroll an element it’s full width left. By then giving the marquee a minimum width we can standardise the shorter text lengths. Then we use calc(100% + 100px) move the item 100% left except the width of the carousel (100px).

It doesn’t quite have the traditional marquee feel with the text scrolling fully but using the animation keyframes it is possible to pause at the end of the text to give the user time to read.

p {
  height: 30px;
  width: 100px;
  background-color: #CCC;
  white-space: nowrap;
}

.marquee {
  overflow: hidden;
  position: relative;
}

.marquee__content {
  padding: 5px 0;
  margin-right: 100px;
  position: absolute;
  height: 20px;
  animation: scroller 3s linear infinite;
  min-width: 100px; /* This needs to match the width of the parent */
}

@keyframes scroller {
 0% {
     transform: translateX(0%);
 }

 /* ‘pauses’ the scroller at the start for 20% of the time, adjust to edit timing */
 20% {
   transform: translateX(0%);
 }

  /* ‘pauses’ the scroller at the end for 20% of the time */
  80% {
    /* Translate will use the width of the element so 100% scrolls it’s full length. add the width of the marquee to stop smaller items scrolling */
   transform: translateX(calc(-100% + 100px)); 
  }

  100% {
   transform: translateX(calc(-100% + 100px));
  }
}


<p class="marquee"><span class="marquee__content">Hi my name is John Doe</span></p>
<p class="marquee"><span class="marquee__content">Yeah!</span></p>