Overflowed text with html in another div

Question

I want to have a text that overflows in another div, so I found and used this answer from another question at Stackoverflow.

The problem is that only plain text is displayed; links, bold/italics and paragraphs are ignored.

Here is the same jsfiddle from the answer, but with added html tags. How do i get to display them?

Code:

var currentCol = $('.col:first');
var text = currentCol.text();
currentCol.text('');
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('.col');
    }
}

Any tips or advice will be appreciated :)

Answer 1

jQuery .text method returns only plain text. Try using .html instead.
Example:

var text = currentCol.html();

But if your tags contain any spaces (like <span class="some-class">) then the following line from your code will do a mess with your text

var wordArray=text.split(' ');

You might want to change it to

text = text.replace(/ (?![^<>]*>)/gi, '%^%');
var wordArray = text.split('%^%');

This is kind of workaround since you could iterate over each regex match and substring it on every space character but IMHO the above idea with %^% combination is much more simple. you can replace those 3 signs with anything you want. I just thought it is unique enough that won't be used in any other purpose.
Above regular expression is simplified and assumes that you don't use < and > signs in your text.
If you actually do I would recommend to replace them with < and > anyway.