Javascript jQuery之后的文本格式问题

Javascript jQuery之后的文本格式问题,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我在这里使用了代码形式:-以使文本在新的div中流动。但是,现在我对文本有格式问题。 每一段的第一个字后面都有一个换行符 您可以在此处看到一个示例: var currentCol=$('.box:first'); var text=currentCol.html(); currentCol.html(“”); text=text.replace(/(?![^]*>)/gi,%^%); var wordArray=text.split('%^%'); $.fn.hasOverflow=函数(){

我在这里使用了代码形式:-以使文本在新的div中流动。但是,现在我对文本有格式问题。 每一段的第一个字后面都有一个换行符

您可以在此处看到一个示例:

var currentCol=$('.box:first');
var text=currentCol.html();
currentCol.html(“”);
text=text.replace(/(?![^]*>)/gi,%^%);
var wordArray=text.split('%^%');
$.fn.hasOverflow=函数(){
var div=document.getElementById($(this.attr('id'));
返回div.scrollHeight>div.clientHeight;
};
对于(var x=0;x
有人知道我怎么解决这个问题吗

谢谢


-----更新:我已经用参考资料中为可能面临类似问题的其他人建议的工作解决方案更新了JSFIDLE------

这可能有点老套,但请尝试以下方法:

  • 添加以下CSS规则
  • 
    .box>p:首先{
    显示:无;
    }
    

  • .box>p
    标记中的每个字符串开头添加“nbsp;”(包括空格)

    Jumo handango


  • 感谢您的快速响应,Walter,但是当将
    :first
    更改为
    :first的类型时,新div中的文本溢出中断。当你测试时它也这样做了吗?谢谢@Walter Roman,这解决了断线问题。但是,我从CSS中删除了
    .box>p{display:none;}
    ,因为这删除了所有段落间隔。我还添加了
    p{margin top:-30px;}
    以减少段落之间的间隔。再次抱歉!我的意思是css规则是
    .box>p:首先
    谢谢!现在css规则没有打破间距。但这到底有什么用呢?当我添加到中时,无论是否使用此规则,结果似乎都是一样的。感谢@Regent的输入,我没有意识到这一点。然而,当我试图像你建议的那样修改代码时,新div中的文本溢出现象爆发了。也许我做错了什么,不幸的是我的java不是流畅的。是的,对不起,它必须是
    var div=this[0]我不知道你的Java是否流畅,但你的JavaScript并没有那么糟糕。谢谢@Regent,现在它不会崩溃:)这项更改到底做了什么?它只是为了获得整洁的代码,还是它还有其他功能?没有功能,只是整洁的代码。获取元素的id并搜索id为的元素(即原始元素)是。。。奇怪:)好的,谢谢@Regent的提醒+1 :)
    
     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');
         }
     }