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> ';
想让超出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强制不换行的更多相关文章
- css中li、a、span行内强制不换行
li.a.span行内强制不换行:white-space:nowrap; 没有之前的效果 加上white-space:nowrap;后
- CSS - 内联元素span 强制换行失败的可能原因
在CSS中,标签span 强制换行失败:(使用display:block) 可能原因:float:left or float:right
- CSS控制Span强制换行、溢出隐藏
CSS控制Span强制换行 word-wrap: break-word; word-break: break-all; white-space: pre-wrap !important; 盒子文字设置 ...
- echars line 底部图例强制不换行(滚动),修改图例样式
{ grid: { left: '5px', right: '10px', top: '10px', bottom: '40px', containLabel: true }, tooltip: { ...
- CSS样式自动换行(强制换行)与强制不换行
自动换行问题,正常字符的换行是比较合理的,而连续的数字和英文字符常常将容器撑大,挺让人头疼,下面介绍的是CSS如何实现换行的方法 对于div,p等块级元素,正常文字的换行(亚洲文字和非亚洲文字)元素拥 ...
- css实现强制不换行/自动换行/强制换行
在我们日常的编码中经常会遇到这段文字不可以换行,或者自动换行的需求.虽然这个功能在我们平时很常见但是我相信大家一定不会可以的去记住它吧(至少小月是很懒惰的从来是用什么查什么 ♦ 嘻嘻...).今天我们 ...
- CSS强制英文、中文换行与不换行 强制英文换行
1. word-break:break-all;只对英文起作用,以字母作为换行依据 2. word-wrap:break-word; 只对英文起作用,以单词作为换行依据 3. white-space: ...
- CSS强制中英文换行与不换行
1. word-break:break-all; 只对英文起作用,以字母作为换行依据 2. word-wrap:break-word; 只对英文起作用,以单词作为换行依据 3. white-space ...
- CSS - 如何实现强制不换行、自动换行、强制换行 以及 chrom默认焦点 IE下 Input 默认出现叉
*:focus {outline: none;} input::-ms-clear {display:none;} 一般的文字截断(适用于内联与块): .text-overflow { display ...
随机推荐
- LeetCode 13、罗马数字转整数
罗马数字包含以下七种字符: I, V, X, L,C,D 和 M. 字符 数值I 1V 5X 10L 50C 100D 500M 1000例如, 罗马数字 2 写做 II ,即为两个并列的 1.12 ...
- 控制input中只能输入固定格式内容
onkeyup 事件会在键盘按键被松开时发生,onafterpaste 是粘贴触发,没有这个事件用onblur吧,失去焦点时发生输入完,点其他地方就会执行. <html lang="e ...
- JavaScript:JSON对象
一.JSON对象概念 JSON (JavaScript Object Notation)一种简单的数据格式,比xml更轻巧. JSON 是 JavaScript 原生格式,这意味着在 JavaScri ...
- WPF-命令-基础知识
命令模型的主要元素: 1.命令 2.命令绑定:命令连接到相关的应用程序逻辑 3.命令源:命令源触发命令, 4.命令目标:应用程序逻辑. -------------------------------- ...
- Dalsa 8K彩色相机Camera link C#采图
一个采图工具,所以界面做的很简单. private SapAcquisition m_Acquisition; private SapBuffer m_Buffers; private SapAcqT ...
- 0219 springmvc-拦截器和响应增强
拦截器 拦截器分同步拦截器和异步拦截器: HandlerInterceptor 方法和执行时机 可以看DispathcerServlet的原来确定它的三个方法的执行时机: AsynHandlerInt ...
- 2019-08-21 纪中NOIP模拟A组
T1 [JZOJ6315] 数字 题目描述
- JS编解码与Java编解码的对应关系
最近前段在导出数据时会遇到“illegal character”的异常错误,结果发现是在请求地址中请求参数包含了空白字符(其编码为%C2%A0)或者是空格字符(其编码为%20),之前对空格字符情况是做 ...
- 【vue 权威指南】 学习笔记 二
1.指令 1.1内部指令 基础指令:v-show , v-else , v-model , v-repeat , v-for , v-text , v-el , v-html , v-on , v-b ...
- 大型数据库技术实验六 实验6:Mapreduce实例——WordCount
现有某电商网站用户对商品的收藏数据,记录了用户收藏的商品id以及收藏日期,名为buyer_favorite1. buyer_favorite1包含:买家id,商品id,收藏日期这三个字段,数据以“\t ...