Make JQuery Marquee When Text Overflows

StackOverflow https://stackoverflow.com/questions/23641244

문제

I am trying to make a Jquery script that will place marquee tags around text if it overflows outside of the #box div. The text is obviously wider than 30px, and the div does hide most of the text. My problem is the marquee effect is not appearing. Here is my full code:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
#box {
    width:30px;
    overflow:hidden;
}
</style>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
</head>

<body>

<div id="box">
Overflooooooooooow
</div>

<script>

$(function(){
  $box = $('#box');
  $box.children().each(function(){
    if ($box.width() < $(this).width()) {
      $(this).wrap('<marquee>');
    }
  });
});
</script>
</body>
</html>

Thank you for any help. All help is appreciated.

도움이 되었습니까?

해결책

The text inside the div is just a text-node, not an element you can get the width of. Just add an inner block-element:

<div id="box">
   <div>Overflooooooooooow</div>
</div>

Edit:

Sorry, won't work with an inner div, as it inherits the parents width by default. Use a span:

<div id="box">
   <span>Overflooooooooooow</span>
</div>
라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top