<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>wrap span</title>
<style>
.text {
width: 25%;
margin: 0;
padding: 0;
border: 0;
font-family: Arial, Helvetica, sans-serif;
}
.text span {
opacity: 0;
animation: fadeIn 350ms forwards;
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
</style>
</head>
<body>
<div id="text" class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus odio mauris, porta
vitae enim sed, imperdiet tristique tortor. Aliquam dui augue, aliquam in ipsum ut, fringilla pharetra ex. Proin
mollis mattis lacus eget lacinia. Curabitur consequat, nunc sed volutpat elementum, quam mauris scelerisque
nunc, sed mattis turpis augue at ligula. Donec nec mauris aliquam purus imperdiet gravida.#4sdjhdfkhg358956
Morbi vel hendrerit risus, nec scelerisque nunc. Vestibulum placerat diam et dui commodo, nec ullamcorper elit
tincidunt. Maecenas vel viverra lorem. Nunc suscipit nulla non lorem imperdiet, at ullamcorper nisl pharetra.
</div>
<script>
var txt = document.getElementById('text');
window.addEventListener('resize', wrapTextToSpan);
wrapTextToSpan();
function wrapTextToSpan() {
txt.innerHTML = '<span>' + getWrappedText(txt.innerText, txt.offsetHeight, txt.className).replace(/\n/gi, '</span><span>') + '</span>';
txt.querySelectorAll("span").forEach(function (span, index) { span.style.animationDelay = index * 50 + "ms"; });
}
var txtArea;
function getWrappedText(str, height, className) {
txtArea = document.createElement('textarea');
document.body.appendChild(txtArea);
txtArea.style.height = height + "px";
txtArea.style.visibility = "hidden";
txtArea.style.position = "absolute";
txtArea.className = className;
txtArea.value = "";
txtArea.wrap = "off";
var wordArr = str.replace(/\n/g, '').split(/\s/gi),
scrollEmptyWidth = txtArea.scrollWidth;
for (var i = 0; i < wordArr.length; i++) {
txtArea.value += wordArr[i] + " ";
if (txtArea.scrollWidth > scrollEmptyWidth)
txtArea.value = txtArea.value.slice(0, txtArea.value.length - wordArr[i].length - 1) + "\n" + wordArr[i] + " ";
}
document.body.removeChild(txtArea);
return txtArea.value;
}
</script>
</body>
</html>