如果文本多于一行，则放置选框

Question

如果div内容不止一行，我想使用<marquee>作为<span> 。

如果内容少于一行，不要使用选取框，但如果大于一行，我希望内容使用选取框显示。

任何帮助表示赞赏，我需要一些建议。

这没关系：

<div id="statusdiv">
    <span id="status">some status here</span>
</div>

---

但如果是这种情况

<div id="statusdiv">
    <span id="status">loooooooooooooooooooong status here</span>
</div>

然后，代码应该更改为

<div id="statusdiv">
    <marquee id="status">loooooooooooooooooooong status here</marquee>
</div>

Answer 1

您可以根据 div 高度将 html 标签“span”更改为选取框。 在下面检查它对你有用。 20 是我硬编码的行高，您可以根据需要更改该行高。

 var clientHeight = document.getElementById('myDiv').clientHeight; alert(clientHeight); if(clientHeight > 20){ // changing the html tag span to marquee if line height more than 20. $('span').contents().unwrap().wrap('<marquee/>'); }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script> <div id="myDiv"> <span class="text">dasdfasasdas asdfasdfa asdfasdfa asdf asdfa fasd asdf asdf asdf asdf asdf asdfads asdfa dsd asdf asd fasdf asdf asdf asd fasd fasdf as dfasdf asd asd asdf asdf</span> </div>

Answer 2

• 我已将id更改为class以显示多个示例

 $('.statusdiv').each(function() { var th = $(this); var ih = $(this).outerHeight(); // outer height var oh = $(this).find('.status').outerHeight(); // inner height var txt = $(this).find('.status').html(); // so that the inline styles remains the same // if outer height is less that inner hieight if (oh > ih) { th.html(''); th.html('<marquee class="status">' + txt + '</marquee>') } });

 .statusdiv { border: 1px solid red; height: 30px; margin: 5px 0; } .statusdiv > .status { line-height: 30px; display: block; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script> <div class="statusdiv"> <span class="status"><strong>Vestibulum</strong> status here In turpis. Vestibulum purus quam, scelerisque ut, mollis sed, nonummy id, metus. Fusce fermentum <strong>Vestibulum</strong> nec arcu. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent <strong>Vestibulum</strong>.</span> </div> <div class="statusdiv"> <span class="status">some status here In turpis. <strong>Vestibulum</strong> purus quam, scelerisque ut, mollis sed, nonummy id, metus. Fusce fermentum odio nec arcu. Cum sociis natoque penatibus et magnis dis parturient monte.</span> </div> <div class="statusdiv"> <span class="status">some status here In turpis. scelerisque ut, mollis sed, nonummy id, metus. </span> </div> <div class="statusdiv"> <span class="status">some status here In turpis. scelerisque</span> </div>