JSFiddle - React, Tailwind, and code Playground

HTML

<div class="customBox">This is a custom text which i need to be displayed shorter that it really is </div>

CSS

.customBox{
    padding: 10px;
    white-space: nowrap; 
    border:1px #ccc dashed;
    width:250px;
    overflow:hidden;
    text-overflow: ellipsis; 
}