<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(四)输出和输入函数

    介绍一下Java里简单常用的输入输出方法. Java的输出函数很简单,直接调用System类的out对象的print函数即可. 代码: System.out.print(a);//输出变量a的值 Sy ...

  2. Connections in Galaxy War ZOJ - 3261 离线操作+逆序并查集 并查集删边

    #include<iostream> #include<cstring> #include<stdio.h> #include<map> #includ ...

  3. 虚拟机出问题 Oh no,something has gone wrong! 解决方法

    系统出错时ctrl+alt+F2 进入命令模式root输入密码yum update...等待输入 y...等待终于好了

  4. 本地.local域名访问实现

    苹果的 Bonjour 的多址广播域名服务(mDNS) 使用".local "后缀来识别 Bonjour 可访问的设备 比如树莓派可以用用raspberrypi.local去访问非 ...

  5. display: inline-block 布局

    三个元素display: inline-block; 布局 ,其中一个元素中存在其他元素也用了display: inline-block; 无法垂直居中,将这个元素设置为display: inline ...

  6. 服务&软件&基础设施的区别

    IT基础设施: 软件 硬件 数据库相关DBM 网络相关 networking(网络通信) 以上4个会出现的比较多 application people 上面的东西都能提供IT服务 一半的互联网公司都会 ...

  7. 【C语言】输出半径1到10的圆的面积,当面积值超过100时,停止执行本程序

    #include<stdio.h> #define PI 3.142 int main() { int r; float area; ; r <= ; r++) { area = P ...

  8. StackExchange.Redis 之 SortedSet 类型示例

    1,增加操作 RedisCacheHelper.Instance.ZSortadd(); RedisCacheHelper.Instance.ZSortadd(); RedisCacheHelper. ...

  9. 数字输出精度 - C语言

    1. 浮点型/双精度浮点型 double a=1234.5678; printf("%8.2lf\n",a);// 小数点前的数表示总位数,小数点也算一位 printf(" ...

  10. arm-linux下qt + opencv开发环境的搭建(Altera DE1 Soc)

    arm-linux-gnueabihf-gcc下载 qt下载 arm-linux下qt + opencv开发环境的搭建(Altera DE1 Soc) Ubuntu 16.04 安装QT arm嵌入式 ...