JSFiddle - React, Tailwind, and code Playground

HTML

<div class="dotted">this is too much of text here this is too much of text here this is too much of text here this is too much of text here this is too much of text here this is too much of text here this is too much of text here this is too much of text here this is too much of text here this is too much of text here this is too much of text here this is too much of text here this is too much of text here </div>

CSS

.dotted {     
    border: 1px solid #000000;
    width: 400px;         
    overflow: hidden;     
    white-space:nowrap;
    text-overflow: ellipsis; 
}