如果文本多於一行，則放置選框

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>