JSFiddle - React, Tailwind, and code Playground

HTML

<p>
It is well known that the article consists of several lines. To enable the reader to distinguish the line that reads it , so i want when hover on line from text or articles While reading change background color? for know all text it between
</p>
<hr>
<p>
It is well known that the article consists of several lines. To enable the reader to distinguish the line that reads it , so i want when hover on line from text or articles While reading change background color? for know all text it between
</p>

CSS

p {
    width: 400px;    
}

p span:hover {
    background-color: green;
}

JavaScript

var $div = $("<div>"), 
    $marker = $("<div>"),
    adder = [],
    $p = $("p"),
    $line = $("<span>").appendTo($marker),
    lastWord = '';

$marker.css({'position': 'fixed', 'top': '100%'}).appendTo("body");

$p.text().split(/\s/).forEach(function (elem) {
    $line.text($line.text() + elem + ' ');
    if ($line.width() > $p.width()) {
        $line.text(function (_, text) {
            return text.slice(0, text.lastIndexOf(elem));
        });
        
        $line.appendTo($div);
        console.log($line.text());
        $line = $("<span>");
        $line.text(' ' + elem).appendTo($marker);
        console.log($marker.html() + "END");
    }
});
$div.append($marker.html());
$p.html($div.html());
$div.remove();
$marker.remove();