JSFiddle - React, Tailwind, and code Playground

HTML

<h1>A very long text with lots of spaces and shit <i data-this="that" data-sheep="hey">only HTML usage doesn't quite work</i></h1>

CSS

h1 {
    padding: 10px;
    display: inline;
    background: #eee;
    border: 1px solid #bbb;
    font-family: Arial;
    line-height: 58px;
}

JavaScript

$.fn.outerHTML = function () {
        // IE, Chrome & Safari will comply with the non-standard outerHTML, all others (FF) will have a fall-back for cloning
        return (!this.length) ? this : (this[0].outerHTML || (
            function (el) {
                var div = document.createElement('div');
                div.appendChild(el.cloneNode(true));
                var contents = div.innerHTML;
                div = null;
                return contents;
            })(this[0]));
    };

    /*
        Requirements:

        1. The container must NOT have a width!
        2. The element needs to be formatted like this:

        <div>text</div>

        in stead of this:

        <div>
            text
        </div>
    */
$.fn.fixInlineText = function (opt) {
        return this.each(function() {
            //First get the container width
            var maxWidth = opt.width;

            //Then get the width of the inline element
            //To calculate the correct width the element needs to 
            //be 100% visible that's why we make it absolute first.
            //We also do this to the container.
            $(this).css("position", "absolute");
            $(this).parent().css("position", "absolute").css("width", "200%");
            
            var width = $(this).width();
            
            $(this).css("position", "");
            $(this).parent().css("position", "").css("width", "");
            
            //Don't do anything if it fits
            if (width < maxWidth) {
                return;
            }

            //Check how many times the container fits within the box
            var times = Math.ceil(width / maxWidth);
            
            //Function for cleaning chunks
            var cleanChunk = function (chunk) {
                var thisChunkLength = chunk.length - 1;
                
                if (chunk[0] == " ") chunk = chunk.substring(1);
                if (chunk[thisChunkLength] == " ") chunk =...