文本溢出时创建JQuery选框

时间:2014-05-13 20:45:37

标签: jquery html css overflow marquee

我正在尝试创建一个Jquery脚本,如果它在#box div之外溢出,它会在文本周围放置选框标记。文本明显宽于30px,而div确实隐藏了大部分文本。我的问题是没有出现选框效果。这是我的完整代码:

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

感谢您的帮助。感谢所有帮助。

1 个答案:

答案 0 :(得分:3)

div中的文本只是一个文本节点,而不是可以获得宽度的元素。只需添加一个内部块元素:

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

编辑:

抱歉,无法使用内部div,因为它默认继承父级宽度。使用范围:

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