span强制不换行

<nobr>不换行内容</nobr>

无论多少文字均不希望换行显示,超出宽度的内容会显示不出来。

<div>
   <nobr>
      <span class="order">' +  data.row.foreignName +'</span>
      <span class="order" style="margin-left: 1rem;">EXCUTEID:' +  data.row.execID +'</span>
   </nobr>
</div> 
想让超出宽度的内容显示出来:
样式加上white-space:pre-line;即可
white-space 属性设置如何处理元素内的空白。
pre-line 合并空白符序列,但是保留换行符。
效果:

html += '<div>';
html += '
<nobr>'; html += '<span class="order">' + data.row.foreignName +'</span>'; html += ' <span class="order" style="margin-left: 1rem;white-space:pre-line;">EXCUTEID:' + data.row.execID +'</span> '; html += '</nobr>'; html += ' </div> ';

<nobr>里嵌套<br>,在加br的地方就自动换行
效果:

<div>
   <nobr>
      <span class="order">' +  data.row.foreignName +'</span>
      <span class="order" style="margin-left: 1rem;width: 150%">EXCUTEID:<br>' +  data.row.execID +'</br></span>
   </nobr>
</div> 

猜你喜欢

转载自www.cnblogs.com/hpwd/p/12187959.html