JSFiddle - React, Tailwind, and code Playground

by Eric Howe

HTML

<p id="text">Here is some text that does things and stuff and <span id="has-break">I'll just keep typing until I get enough nonsense</span> in here to get a line break inside a span and another span without a line break. <span id="no-break">Hooray for run on nonsense.</span></p>
<p id="info"></p>

CSS

#one-word {
    color: purple;
}
#has-break {
    color: red;
}
#no-break {
    color: green;
}

JavaScript

// Hack in a span that we will know won't span two lines,
// wrapping the first word in a <span> should do the trick.
var content = $('#text').html();
content = '<span id="one-word">' + content.replace(/ /, '</span> ');
$('#text').html(content);

var $info      = $('#info');
var $has_break = $('#has-break');
var $no_break  = $('#no-break');
var $one_word  = $('#one-word');

$info.append(
      '<br/>'
    + 'one-word height: ' + $one_word.height() + 'px'
    + '<br/>'
    + 'has-break height: ' + $has_break.height() + 'px'
    + '<br/>'
    + 'no-break height: ' + $no_break.height() + 'px'
    + '<br/><br/>'
);
if($has_break.height() > $one_word.height())
    $info.append('#has-break spans more than one line');
else
    $info.append('#has-break spans only one line');
$info.append('<br/>');
if($no_break.height() > $one_word.height())
    $info.append('#no-break spans more than one line');
else
    $info.append('#no-break spans only one line');