JS调用jQuery.html()方法拼接带空格字符串异常换行问题咨询

这个换行问题和你使用的.html()赋值逻辑无关，是CSS文本换行规则和元素位置共同作用的结果：

1. 两个元素的定位偏移量差异很大：.timeRema的left属性为700，距离页面左侧更近，右侧有足够的剩余空间容纳拼接的 |字符；而.dirTime的left属性为1190，已经非常靠近页面/父容器的右边缘，可容纳内容的剩余宽度不足。
2. 浏览器默认的文本断行规则会将普通空格作为合法的断行分隔点，当.dirTime的剩余宽度不足以放下「空格+竖线」两个字符的总宽度时，就会自动在空格处断行，把竖线推到下一行。
3. 你测试时去掉空格改用连续的||后没有换行，也恰好验证了这个逻辑：连续无空格的字符不会被浏览器默认判定为可断行，只要内容总宽度不溢出就不会触发换行。

你可以根据实际业务场景任选一种方案修复：

• 最稳妥的通用方案：给.dirTime新增CSS属性white-space: nowrap;，强制该元素内部的所有文本不允许自动断行，无论后续内容长度如何变化都不会触发类似问题。
• 调整布局空间：要么把.dirTime的left属性值适当调小，给右侧留出更多空间，要么明确给.dirTime设置足够的width属性，确保可以容纳拼接后的完整内容。
• 替换空格类型：把拼接逻辑里的普通空格替换为HTML非断行空格，修改代码为$(".dirTime").html(convertSecToMin(dirTime) + " |");，非断行空格不会被浏览器作为断行分隔点，也能避免换行。

内容的提问来源于stack exchange，提问作者AlonsoGP