jQuery 之后的文本格式问题答案

【问题标题】：Issues with text formatting after jQueryjQuery 之后的文本格式问题
【发布时间】：2023-03-23 12:41:01
【问题描述】：

我在这里使用了代码形式：Overflowed text with html in another div - 让文本在新的 div 中流动。但是，现在我遇到了文本格式问题。每个段落的第一个单词后面都有一个换行符。

您可以在此处查看示例：http://jsfiddle.net/hm2yfw61/9/

 var currentCol = $('.box:first');
 var text = currentCol.html();
 currentCol.html('');
 text = text.replace(/ (?![^<>]*>)/gi, '%^%');
 var wordArray = text.split('%^%');



 $.fn.hasOverflow = function () {
     var div = document.getElementById($(this).attr('id'));
     return div.scrollHeight > div.clientHeight;
 };


 for (var x = 0; x < wordArray.length; x++) {
     var word = wordArray[x];
     currentCol.append(word + ' ');
     if (currentCol.hasOverflow()) {
         currentCol = currentCol.next('.box');
     }
 }

有谁知道我该如何解决这个问题？

谢谢。

-----更新：我已经更新了 jsfiddle，并为可能面临类似问题的其他人提供了参考建议的工作解决方案 ------

【问题讨论】：

感谢@Regent 的输入，我不知道这一点。但是，当我尝试按照您的建议更改代码时，文本溢出到新 div 中断了。也许我做错了什么，不幸的是我的 java 不流畅。
是的，抱歉，必须是var div = this[0]; 我不知道你的Java 是否流畅，但你的JavaScript 还不错。
感谢@Regent，现在它不会中断 :) 这个更改到底有什么作用？只是为了获得更整洁的代码，还是还有其他功能？
没有功能，只是代码更整洁。获取元素的 id 并搜索具有 id 的元素（这是原始元素）是......奇怪:)
好的，感谢@Regent 的提醒。 +1 :)

标签： javascript jquery html css

【解决方案1】：

这可能有点 hacky，但请尝试以下操作：

添加以下 CSS 规则

.box > p:first { display: none; }

在.box > p标签中每个字符串的开头添加“nbsp;”（包括空格）。

<p>&nbsp; Jumo handango

Updated Fiddle

【讨论】：

感谢 Walter 的快速响应，但是当将 :first 更改为 :first-of-type时，文本溢出到新 div 中断了。你测试的时候也是这样吗？
感谢@Walter-Roman，这解决了换行问题。但是，我从 CSS 中删除了 .box > p {display: none;}，因为它删除了所有段落间距。我还添加了p { margin-top: -30px; } 以减少段落之间的间距。
再次抱歉！我的意思是那个css规则是.box > p:first
谢谢！现在该 css 规则并没有破坏间距。但这究竟是做什么的？在我添加之后，无论有没有这个规则，结果似乎都是一样的。到
.