ureech,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.text p.test {
white-space: nowrap;
display: inline-block;
}
.text p {
border: 1px solid red;
margin: 3px auto;
}
.text {
width: 500px;
border: 1px solid #008000;
padding: 2px 4px;
}
</style>
<script>
document.addEventListener("DOMContentLoaded", function() {
let div = document.querySelector(".example");
let txt = div.textContent.match(/\s+|\S+/g);
let p = document.createElement("P");
let out = document.querySelector(".text");
out.append(p);
let pageWidth = p.clientWidth;
p.classList.add("test");
for (let sample of txt) {
let node = document.createTextNode(sample);
p.append(node);
if (p.scrollWidth > pageWidth) {
node.remove();
let clone = p.cloneNode(true);
clone.classList.remove("test");
out.append(clone);
p.textContent = sample;
}
}
p.classList.remove("test");
out.append(p);
})
</script>
</head>
<body>
<div class="example">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae, voluptate, facilis, suscipit, nihil laborum cumque obcaecati debitis eos adipisci ea cupiditate quasi tenetur quo. Dicta, animi quos perferendis ut iure. Debitis, beatae, voluptatibus,
illum odio in fuga doloremque ea magnam natus labore molestiae quas dolore reprehenderit architecto cupiditate nostrum ut omnis inventore quibusdam placeat asperiores expedita necessitatibus ad hic vel? Rem, neque qui incidunt consectetur sint
maiores architecto recusandae eos cupiditate consequuntur iure explicabo? Consequatur, culpa quibusdam autem nam officia aspernatur quisquam ab tenetur ducimus voluptatem. Consectetur, architecto earum veritatis.</div>
<div class="text"></div>
</body>
</html>