<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. JMeter-做性能测试从何开始

    JMeter-性能测试 参考文档:https://jmeter.apache.org/usermanual/boss.html 一.问题 1.预计的平均用户数是多少(正常负载)? 2.预计的高峰用户数 ...

  2. 安装AB到CentOS(YUM)

    运行环境 系统版本:CentOS Linux release 7.3.1611 (Core) 软件版本:httpd-tools-2.4.6 硬件要求:无 安装过程 1.安装YUM-EPEL源 HTTP ...

  3. RocketMQ的生产者和消费者

    生产者: /** * 生产者 */ public class Provider { public static void main(String[] args) throws MQClientExce ...

  4. html css二级导航栏

    二级导航栏制作: 1.将一级导航栏去除列表样式(list-style:none),并给予浮动,使其横向排列(float:left) 2.给每个li中添加一个<a></a>标签, ...

  5. ubuntu 16.04.1上安装并使用nginx

    1.安装 sudo apt-get install nginx 2.这时候应该就已经启动了,跳到步骤4. 通过命令“ps -aux | grep nginx”看下是否启动 3.如果没有启动,可以使用命 ...

  6. 844. 走迷宫(bfs模板)

    给定一个n*m的二维整数数组,用来表示一个迷宫,数组中只包含0或1,其中0表示可以走的路,1表示不可通过的墙壁. 最初,有一个人位于左上角(1, 1)处,已知该人每次可以向上.下.左.右任意一个方向移 ...

  7. asp.net web core 部署问题汇总

    记录所有部署时遇到的问题.    微软官网部署说明 转载自:.NET Core 3.0 构建和部署(测试过可以使用)   A    单文件可执行文件(文件体积较大,合并所有依赖)       asp. ...

  8. 【kuangbin带你飞】 MST专题

    唉,被班级合唱和复变考试搞得心力交瘁.新算法学不进去,更新下吧 A - Til the Cows Come Home The Head Elder of the tropical island of ...

  9. 《深入理解java虚拟机》读书笔记一——第二章

    第二章 Java内存区域与内存溢出异常 1.运行时数据区域 程序计数器: 当前线程所执行的字节码的行号指示器,用于存放下一条需要运行的指令. 运行速度最快位于处理器内部. 线程私有. 虚拟机栈: 描述 ...

  10. Hdu2099 整除的尾数

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=2099 Problem Description 一个整数,只知道前几位,不知道末二位,被另一个整数除尽了 ...