JSFiddle - React, Tailwind, and code Playground
HTML
<a href="#">This link may span multiple lines. This link may span multiple lines. This link may span multiple lines. This link may span multiple lines. This link may span multiple lines. This link may span multiple lines. This link may span multiple lines. This link may span multiple lines. This link may span multiple lines. This link may span multiple lines.</a>
<div
id="result"></div>
CSS
.red {
background-color:red;
}
JavaScript
$(document).ready(function () {
var words = $('a').text().split(' '); //break the link's words into array
for (var i = 0; i < words.length; ++i) {
words[i] = '<span>' + words[i] + '</span> '; //wrap each word in a span
}
words.join(' '); //join the words
$('a').html(words); //replace the link html with the words wrapped in spans
var points = []; //to store our points
var lastIndex = $('a span').length - 1; //so we know we've hit the last point
var first; //keep track of first point
$('a span').each(function (i) {
var pos = $(this).position();
if (i > 0) {
if (i != lastIndex) {
if (points[points.length - 1].top < pos.top) { //have we hit a new line?
var newPos = $($('a span')[i - 1]).position();
if (newPos.left != first.left) { //check if we are on the right side of the object
newPos.left += $($('a span')[i - 1]).width(); //add the width of the word
points.push(newPos); //push this point
} else {
points.push(newPos); //we are on the left side, push the point without the width of the word
}
//$($('a span')[i - 1]).addClass('red'); //useful for debugging
}
} else {
var bottomLineHeight = $(this).height();
pos.left += $(this).width(); //add width to last point
pos.top += bottomLineHeight; //add height to last point, push later
points[points.length - 1].top += bottomLineHeight; //add height to second to last point
points.push(pos); //push last point
}
} else {
points.push(pos); //push first point
first = pos; //keep track of topLeft point (first)
}
});
//for printing out points
var html = '';
$(points).each(function (i, obj) {
...