<div class="grid_1_of_4 images_1_of_4">
    <a href="preview.html"><img src="images/Advertise2.png" alt="" /></a>
    <h2>**This is a Long text**</h2>
    <div class="price-details">
        <div class="price-number">
            <p><span class="rupees">Price</span></p>
        </div>
        <div class="clear"></div>
    </div>   
</div>

I want to make this h2 text Marquee when text overflows. How should I do it? Thank You!

<div class="grid_1_of_4 images_1_of_4">
    <a href="preview.html"><img src="images/Advertise2.png" alt="" /></a>
    <h2>**This is a Long text**</h2>
    <div class="price-details">
        <div class="price-number">
            <p><span class="rupees">Price</span></p>
        </div>
        <div class="clear"></div>
    </div>   
</div>

I want to make this h2 text Marquee when text overflows. How should I do it? Thank You!

• javascript
• jquery
• html
• css

• Here are some infos about that: stackoverflow./questions/31951282/… – D. Braun Commented Jan 18, 2018 at 13:09
• Check this out stackoverflow./questions/41987383/… – Vikas Singh Commented Jan 18, 2018 at 13:34

2 Answers 2

Here is a similar issue: How to make marquee text only when it's overflowing?

You should try the solution mentioned in the link above. Hope this is helpful. In your case I just gave your h2 tag an id and copied the solution from the link I've posted.

function isElementOverflowing(element) {
  var overflowX = element.offsetWidth < element.scrollWidth,
    overflowY = element.offsetHeight < element.scrollHeight;

  return (overflowX || overflowY);
}

function wrapContentsInMarquee(element) {
  var marquee = document.createElement('marquee'),
    contents = element.innerText;

  marquee.innerText = contents;
  element.innerHTML = '';
  element.appendChild(marquee);
}

var element = document.getElementById('overflow');

if (isElementOverflowing(element)) {
  wrapContentsInMarquee(element);
}

#overflow {
  white-space: nowrap;
  max-width: 15em;
  overflow: hidden;
}

<div class="grid_1_of_4 images_1_of_4">
  <a href="preview.html"><img src="images/Advertise2.png" alt="" /></a>
  <h2 id="overflow">**This is a Long text which should marquee when overflow**</h2>
  <div class="price-details">
    <div class="price-number">
      <p><span class="rupees">Price</span></p>
    </div>
    <div class="clear"></div>
  </div>
</div>

That tag is obsolete and you should not use it. Look at MDN for refrerence.

To detect overflow you could test element.scrollWidth > element.clientWidth given that the width of the element is set, or you pare it with its parent.

Instead of the marquee element you could try to do a CSS animation on the content transforming translateX to make it bounce left and right.

Example code at JSBin