JSFiddle - React, Tailwind, and code Playground

by jackrugile

HTML

<div class="container float">
<p>This text should overflow and have an ellipsis on it.</p>
<div>This text should overflow and have an ellipsis on it.</div>
</div>
<div class="container">
<p>This text should overflow and have an ellipsis on it.</p>
<div>This text should overflow and have an ellipsis on it.</div>
</div>

CSS

.float {
    float: left;    
}

div, p {
    clear: both;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 50px;               
}

JavaScript

$('.container div, .container p').each(function(){
    console.log($(this).width());
});