JSFiddle - React, Tailwind, and code Playground

HTML

<p>HOVER A INPUT</p>
<input id="value" type="text" size="18" value="Recruitment of online chorvanes">
    <br/>
<input id="value" type="text" size="20" value="1234567890123456789012345" autofocus> AUTOFOCUS
    <br/>
<input id="value" type="text" size="20" value="1234567890123456789012345">
    <br/>
<input id="value" type="text" size="20" value="1234567890123456789012345">
    <br/>
<input id="value" type="text" size="20" value="1234567890123456789012345">
    <br/>

CSS

input[type="text"] {
    text-overflow: ellipsis;
}

input[type="text"]:hover {
    text-overflow: initial;
}