JSFiddle - React, Tailwind, and code Playground
HTML
<div class="tool-tip-wrap">
<div class="tool-tip" id="tip">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean varius, ipsum nec eleifend convallis, purus interdum metus, vitae porta diam est sit amet nibh.</div>
</div>
<div class="invisible" id="invisible"></div>
CSS
body {
font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
font-size: 12.6px;
background-color: #e6e6e6;
}
.tool-tip-wrap {
background-color: #333333;
border-radius: 5px;
padding: 10px;
display: inline-block;
}
.tool-tip {
display: inline-block;
word-break: break-all;
color:#fff;
}
.tool-tip .tip-span {
letter-spacing: 0;
}
.tip-span:after {
content:" "
}
.tip-span:last-child:after {
content:""
}
.invisible {
height: 0;
overflow: hidden;
}
JavaScript
$(document).ready(function () {
var tip = $("#tip");
var inviCont = $('#invisible');
var maxWidth = 30;
/* calculating space width taken b/w words */
inviCont.html("<span id='getSpace' > </span>");
var spaceWidth = $('#getSpace').width();
inviCont.html("");
var arr = tip[0].innerHTML.split(/\s+/);
for (i = 0; i < arr.length; i++) {
if (arr[i].trim() == '') {
arr.splice(i, 1);
}
}
/* wrapping each text in array */
var html = "";
var len = arr.length;
for (i = 0; i < arr.length; i++) {
html += "<span>";
html += arr[i];
html += "</span>";
}
tip[0].innerHTML = html;
var tip_width = tip.width();
/* calculating width */
var setWidth;
for (i = 2; i < len; i++) {
if ((tip_width % i) == 0) {
setWidth = (tip_width + (len * spaceWidth)) / i;
if (setWidth <= 30) {
console.log(i)
break;
}
}
}
tip.css({
'width': setWidth + 'px'
})
/* adding space between each words */
$('#tip span').each(function () {
$(this).addClass('tip-span');
});
});