Question

<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>

我希望在文本溢出时使这个h2文本Marquee。我该怎么办？谢谢！

Answer 1

这是一个类似的问题： How to make marquee text only when it's overflowing?

您应该尝试上面链接中提到的解决方案。希望这是有帮助的。在你的情况下，我只是给你的h2标签一个id并从我发布的链接中复制了解决方案。

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>

Answer 2

该标记已过时，您不应使用它。请查看MDN的参考资料。

要检测溢出，您可以在设置元素宽度的情况下测试element.scrollWidth > element.clientWidth，或者将其与父元素进行比较。

您可以尝试在内容上转换translateX以使其左右反弹，而不是使用选框元素。

JSBin

的示例代码

文本溢出时制作选取框

2 个答案: