Issues with text formatting after jQuery

问题

I have used code form here: Overflowed text with html in another div - to get text to flow over in a new div. However, now I have formatting issues with the text. The first word of every paragraph is somehow followed by a line-break.

You can see an example here: 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');
     }
 }

Does anyone know how I can fix this?

Thanks.

-----UPDATE: I've updated the jsfiddle with the working solutions suggested in reference for others who may face similar problems ------

回答1:

This might be a bit hacky, but try the following:

1. Add the following CSS rule

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

2. Add "nbsp; " (including the space) at the beginning of each string in .box > p tags.

   <p>&nbsp; Jumo handango

Updated Fiddle

来源：https://stackoverflow.com/questions/26459040/issues-with-text-formatting-after-jquery