JSFiddle - React, Tailwind, and code Playground

by Gaurav Singhal

HTML

<div id="first">
    <div class="one">Using text-overflow is a difficult skill to master. Please help me with your comments</div>
    <div class="two"></div>
</div>

CSS

#first {
    max-height: 310px;
    width: 300px;
    border: 1px solid red;
}
.one {
    max-height: 150px;
    width: inherit;
    border: 1px solid blue;
    font-size: 40px;
    overflow: hidden;
    text-overflow: ellipsis;
    min-height: 100px;
    /* white-space: nowrap; */
}
.two {
    height: 100px;
    width: inherit;
    border: 1px solid green;
}