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

想让超出div宽度后的内容自动换行:
在父div加上width: 280px;display:block;word-break: break-all;word-wrap: break-word;
html += '<div style="width: 280px;display:block;word-break: break-all;word-wrap: break-word;">';
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>

span强制不换行的更多相关文章

  1. css中li、a、span行内强制不换行

    li.a.span行内强制不换行:white-space:nowrap; 没有之前的效果 加上white-space:nowrap;后

  2. CSS - 内联元素span 强制换行失败的可能原因

    在CSS中,标签span 强制换行失败:(使用display:block) 可能原因:float:left   or  float:right

  3. CSS控制Span强制换行、溢出隐藏

    CSS控制Span强制换行 word-wrap: break-word; word-break: break-all; white-space: pre-wrap !important; 盒子文字设置 ...

  4. echars line 底部图例强制不换行(滚动),修改图例样式

    { grid: { left: '5px', right: '10px', top: '10px', bottom: '40px', containLabel: true }, tooltip: { ...

  5. CSS样式自动换行(强制换行)与强制不换行

    自动换行问题,正常字符的换行是比较合理的,而连续的数字和英文字符常常将容器撑大,挺让人头疼,下面介绍的是CSS如何实现换行的方法 对于div,p等块级元素,正常文字的换行(亚洲文字和非亚洲文字)元素拥 ...

  6. css实现强制不换行/自动换行/强制换行

    在我们日常的编码中经常会遇到这段文字不可以换行,或者自动换行的需求.虽然这个功能在我们平时很常见但是我相信大家一定不会可以的去记住它吧(至少小月是很懒惰的从来是用什么查什么 ♦ 嘻嘻...).今天我们 ...

  7. CSS强制英文、中文换行与不换行 强制英文换行

    1. word-break:break-all;只对英文起作用,以字母作为换行依据 2. word-wrap:break-word; 只对英文起作用,以单词作为换行依据 3. white-space: ...

  8. CSS强制中英文换行与不换行

    1. word-break:break-all; 只对英文起作用,以字母作为换行依据 2. word-wrap:break-word; 只对英文起作用,以单词作为换行依据 3. white-space ...

  9. CSS - 如何实现强制不换行、自动换行、强制换行 以及 chrom默认焦点 IE下 Input 默认出现叉

    *:focus {outline: none;} input::-ms-clear {display:none;} 一般的文字截断(适用于内联与块): .text-overflow { display ...

随机推荐

  1. Java数三退一问题

    问题描述 有100人围成一圈,顺序排号.从第1个人开始报数(从1到3报数),凡报到3的人退出圈子,问最后留下的是原来的第几号的那位. 代码实现: public class Count3Quit1 { ...

  2. Jmeter实践

    Jmeter时间戳函数 详见:https://blog.csdn.net/dreamtl/article/details/68957447 ${__timeShift(yyyy-MM-dd HH:mm ...

  3. elasticsearch index 过程

    (1)index request 到某一个Node(选择node的方式是采用round-robin)方法,此node 称为coordinate node,继续当前index request应该执行在哪 ...

  4. MySql 小表驱动大表

    在了解之前要先了解对应语法 in 与 exist. IN: select * from A where A.id in (select B.id from B) in后的括号的表达式结果要求之输出一列 ...

  5. react-绑定this并传参的三种方式

    绑定this并传参的三种方式 在事件中绑定this并传参: <input type="button" value="在事件中绑定this并传参" onCl ...

  6. 虚拟化技术xen的简介和安装

    虚拟化技术的分类: 1,模拟:Emulation ​ Qemu,PearPC,Bochs 2,完全虚拟化:Full Virtualization,Native Virtualization ​ HVM ...

  7. Luogu1287 | 盒子与球 (排列组合)

    贴一个和其他题解不一样的做法 QWQ 题意:让我们求出 N 个球放入 R 个盒子且每个盒子都必须放球方案数. 首先,对于每一个球,可以将其放入的盒子数量共有 R 个,所以我们可以知道如果无需满足每个盒 ...

  8. MySQL8.0.11解压版安装详细教程

    1. 从官网下载zip包 官网网址(https://dev.mysql.com/downloads/mysql/) 2. 解压 将压缩包解压到一个目录(后续将此目录作为安装目录),我这里是解压到了D: ...

  9. linq 查询-“必须是可缩小的节点”

    出现此错误的情况 查询中先使用分组方法GroupBy()=>Select()=>OrderBy()=>ToList()(实现分组后排序) 解决方法: 排序OrderBy()应该放在S ...

  10. phpstorm格式化数组

    如果我们想要的这样的数组格式的话,可以设置 <?php $arr = array["a" => 0, "b" => 1, "c&qu ...