JSFiddle - React, Tailwind, and code Playground

by lid0

HTML

<div id="render">
</div>

CSS

span{
    border:0px solid gray;
    font-size:20px;
}

JavaScript

var $render = $("#render");
var viewport = {width:"100"};
var input_str = "Hel<br>l<br>o World<br> this is the thing";

$render.css(viewport);

function text_2_span(str){
    var words = str.split(" ");
    var span_words = words.map(function(w){return "<span>"+w+"</span>";});
    //console.log(span_words);
    return span_words.join(" ");
}


$render.html( text_2_span(input_str) );

var line_height = 22; //this may change for development use a fix size. as observed.
var top_offset = 8;

var current_top = 0;
var line = 0;

$("span").map(function(i,item){
    console.log(i,item);
   
    console.log("Start Line:", Math.floor(($(item).position().top - top_offset)/line_height)+1 );
    
    if($(item).height() > line_height){
       console.warn("word span on:", parseInt($(item).height()/line_height), "lines");
    }
    console.log( {text: $(item).text(),
        position_top: $(item).position().top,
        offset: $(item).offset(),
        height:$(item).height(),
        line_height:$(item).css("line-height")
        });
});