JSFiddle - React, Tailwind, and code Playground

by johntrepreneur

HTML

<p>This div uses "text-overflow:clip":</p>
<div id="div1">This is some long text that will not fit in the box</div>
<br>
<p>This div is the same CSS and just doesn't use text-overflow:</p>
<div id="div2">This is some long text that will not fit in the box</div>

CSS

#div1 {
    white-space: nowrap; 
    width: 12em; 
    overflow: hidden;
    text-overflow: clip;
    border: 1px solid #000000;
}

#div2 {
    white-space: nowrap; 
    width: 12em; 
    overflow: hidden;
    border: 1px solid #000000;
}