JSFiddle - React, Tailwind, and code Playground

HTML

<div id="el1">
    <div id="el2">
        <div id="el3">text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text </div>
    </div>
    
</div>

CSS

html,
body {
    height: 100%;
    margin: 0;
    padding: 0;
}

#el1 {
    height: 100%;
    background-color: #f99;
}

#el2 {
    background-color: #9f9;
}

#el3 {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}