<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. Spark学习之路 (十)SparkCore的调优之Shuffle调优[转]

    概述 大多数Spark作业的性能主要就是消耗在了shuffle环节,因为该环节包含了大量的磁盘IO.序列化.网络数据传输等操作.因此,如果要让作业的性能更上一层楼,就有必要对shuffle过程进行调优 ...

  2. 你是个好人,但不是个好leader

    午餐时间,我翻看朋友圈,浏览到一条朋友A的最新动态,她刚创业半年多的公司因为资金周转不灵.项目搁浅.合伙人撤资等多方面原因,最终倒闭了. 朋友A有着多年的名企工作经验,985大学毕业,在学校时是学霸, ...

  3. JavaDay9(下)

    Java learning_Day9(下) 本人学习视频用的是马士兵的,也在这里献上 <链接:https://pan.baidu.com/s/1qKNGJNh0GgvlJnitTJGqgA> ...

  4. Qt Gui 第十章

    一.QListWidget.QTableWidget和QTreeWidget QTableWidget的item默认是可以编辑,其他两个的item默认是不可编辑.如果要将QTableWidget设置成 ...

  5. waiting list

    Problem: how to cluster non-stationary multivariate time series. What are stationary time series How ...

  6. C# LINQ学习笔记二:LINQ标准查询操作概述

    本笔记摘抄自:https://www.cnblogs.com/liqingwen/p/5801249.html,记录一下学习过程以备后续查用. “标准查询运算符”是组成语言集成查询 (LINQ) 模式 ...

  7. Python该怎么入门?Python入门教程(非常详细)

    Python要学多久可以学会,达到精通呢? 任何知识都是基础入门比较快,达到通晓的程序是需求时日的,这是一个逐渐激烈的进程. 通晓任何一门编程语言,都需求通过大量的实践来积累经验,解决遇到的各种疑难问 ...

  8. pyecharts包学习笔记

    目录 pyecharts包简介 特性 or 优点 版本 pyecharts包简介 精巧的图表设计.原作者说,当数据分析遇到数据可视化的时候github,该包就诞生了. 可以批量,直观的输出可视化图标吧 ...

  9. K3/Cloud 执行计划任务错误排查

    计划任务的不执行原因可能有: 1.K3CloudJobProcess服务处于停止状态. 2.数据中心未勾选“允许执行计划任务”. 这种情况此数据中心下的所有计划任务都不会执行到. 3.第一次加进计划任 ...

  10. MySQL用B+树做索引

    索引这个词,相信大多数人已经相当熟悉了,很多人都知道MySQL的索引主要以B+树为主,但是要问到为什么用B+树,恐怕很少有人能把前因后果讲述的很完整.本文就来从头到尾介绍下数据库的索引. 索引是一种数 ...