JSFiddle - React, Tailwind, and code Playground

HTML

<div id="wrap">

    <div class="message">This is the message preview, a very very long one, it just keeps going but you won't see it</div>
    <div class="message">This is the message preview, a very very long one, it just keeps going but you won't see it</div>
    <div class="message">This is the message preview, a very very long one, it just keeps going but you won't see it</div>


</div>

CSS

#wrap{
    
    outline:1px solid red;

width:100%;
    height:100%;

}

.message{


        outline:1px solid orange;

width:100%;
    height:20px;
    overflow:hidden;
    
}