Question

如果<marquee>内容超过一行，我想<span>使用div。

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

感谢任何帮助，我需要一些建议。

这没关系：

<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

您可以更改html标记＆＃34; span＆＃34;基于div高度的选框。检查下面它将适合您。 20是硬编码的线高，你可以根据你的要求改变那个。

＆＃13;

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/>');
  
 }

＆＃13;

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

＆＃13;

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>

如果文本超过一行，则放置选取框

2 个答案: