JSFiddle - React, Tailwind, and code Playground

by dreamyguy

HTML

<h5>Demo Width</h5>
<div class="demo width">sentence one</div>
<div class="demo width">
    <span>sentence two</span>
</div>
<div class="demo width">
    <p>sentence three</p>
</div>
<div class="demo width">this is a long sentence for the sake of testing yes you know what I mean jesus I can't believe you're still reading omg stop it already nooo I can't take it get into tha choppa oh noes you ain't going away I'm going to blow whaææwhaæærrhhhh byeee *die*</div>

<h5>Demo Height</h5>
<div class="demo height">sentence one</div>
<div class="demo height">
    <span>sentence two</span>
</div>
<div class="demo height">
    <p>sentence three</p>
</div>
<div class="demo height">this is a long sentence for the sake of testing yes you know what I mean jesus I can't believe you're still reading omg stop it already nooo I can't take it get into tha choppa oh noes you ain't going away I'm going to blow whaææwhaæærrhhhh byeee *die*</div>

<h5>Demo Width w/ No-Wrapper</h5>
<div class="demo nowrap width">sentence one</div>
<div class="demo nowrap width">
    <span>sentence two</span>
</div>
<div class="demo nowrap width">
    <p>sentence three</p>
</div>
<div class="demo nowrap width">this is a long sentence for the sake of testing yes you know what I mean jesus I can't believe you're still reading omg stop it already nooo I can't take it get into tha choppa oh noes you ain't going away I'm going to blow whaææwhaæærrhhhh byeee *die*</div>

<h5>Demo Height w/ No-Wrapper</h5>
<div class="demo nowrap height">sentence one</div>
<div class="demo nowrap height">
    <span>sentence two</span>
</div>
<div class="demo nowrap height">
    <p>sentence three</p>
</div>
<div class="demo nowrap height">this is a long sentence for the sake of testing yes you know what I mean jesus I can't believe you're still reading omg stop it already nooo I can't take it get into tha choppa oh noes you ain't going away I'm going to blow whaææwhaæærrhhhh byeee *die*</div>

CSS

.demo {
    overflow: hidden;
    -o-text-overflow: ellipsis;
    -ms-text-overflow: ellipsis;
    text-overflow: ellipsis;
}
.nowrap { white-space: nowrap; }
.width { width: 40px; }
.height { height: 20px; }