JSFiddle - React, Tailwind, and code Playground

by garmashnikolay

HTML

<div>
    <span class="uneditable">some</span>
    <span>
        <span class="editable" contenteditable="true">
            ?action=sldfkj&app_id=234234324&some=slkdfjlksdjf&some=sdkjfskdjflksdjflkjsdlfkjsdlkfjlksdf&some=sldkfjlksdjflksdjflkjsdf
        </span>
    <span>
</div>

CSS

.place {
    height: 20px;
    width: 1px;
    display: inline-block;
    float: left;
}
.uneditable {
    color: #ccc;
    float: left;
    display: block;
}

.editable {
    min-width: 20px;
    min-height: 12px;
    display: block;
    outline: none;
    word-break: break-all;
}

JavaScript

document.getElementsByClassName('editable')[0].addEventListener('input', function (e) {
    if (!e.target.textContent) {
        e.srcElement.textContent = '\u00a0';
    }
})