JSFiddle - React, Tailwind, and code Playground

by sadmicrowave

HTML

The content within the red square should have an ellipsis on overflow rather than just being cut off...


<a class='flow-element' style='top:100px; left:50px;'>
     <div class='inner'>
         <span class='long'>Box 1 and some other content that should wrap and do some other stuff</span>
    </div>
</a>

CSS

.flow-element{ 
    position:absolute; 
    font-size:12px; 
    text-align:center; 
    width:75px; 
    height:75px; 
    line-height:70px; 
    border:1px solid #ccc;
}

.flow-element .inner{ 
    position:absolute; 
    width:80%; 
    height:80%; 
    border:1px solid blue; 
    top:0px; 
    bottom:0px; 
    left:0px; 
    right:0px; 
    margin:auto; 
    text-align:center; 
}
            
.flow-element .long{ 
    float:left; 
    height:50px; 
    width:100%; 
    line-height:12px; 
    border:1px solid red;  
    text-overflow:ellipsis;
    overflow:hidden; 
}