jQuery之后的文本格式问题

我在这里使用了代码形式：在另一个div中用html溢出文本-让文本在新的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，为其他可能面临类似问题的人提供了参考建议的工作解决方案------