JSFiddle - React, Tailwind, and code Playground

HTML

<p id="one">This is a paragraph that matches the constraints.</p>
<hr>
<p id="two">This is a paragraph that does not match the constraintsconstraintsconstraintsconstraints.</p>

CSS

html, body {
    width: 200px;
}

body {
    border-right: 1px dashed #FF1111;
}

JavaScript

var two = document.getElementById('two'),
    text = two.firstChild,
    wrapper = document.createElement('span');

// wrap it up
wrapper.appendChild(text);
two.appendChild(wrapper);

// better than bad, it's good.
console.log(wrapper.offsetWidth);

// put it back the way it was.
two.removeChild(wrapper);
two.appendChild(text);