CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Tngld
Tngld

Reputation: 153

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 ------

Upvotes: 1

Views: 163

Answers (1)

Walter Roman
Walter Roman

Reputation: 4779

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

  1. Add the following CSS rule

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

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

    <p>&nbsp; Jumo handango

Updated Fiddle

Upvotes: 1

Related Questions