JSFiddle - React, Tailwind, and code Playground

by David Thomas

HTML

<div class="multiline">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer non cursus purus. Aenean id metus velit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla rutrum, ipsum a adipiscing dignissim, justo libero viverra nulla, in semper libero neque eget justo. Pellentesque id neque a risus laoreet dignissim ut eget urna. Sed vel placerat eros. Sed commodo libero tempor orci porttitor suscipit.</div>

<div class="singleline">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer non cursus purus. Aenean id metus velit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla rutrum, ipsum a adipiscing dignissim, justo libero viverra nulla, in semper libero neque eget justo. Pellentesque id neque a risus laoreet dignissim ut eget urna. Sed vel placerat eros. Sed commodo libero tempor orci porttitor suscipit.</div>

CSS

div {
    overflow: hidden;
    position: relative;
    width: 50%;
    max-width: 15em;
    margin: 0 auto 1em auto;
    border: 2px solid #000;
    line-height: 1.5em;
}
div.multiline {
    max-height: 12em;
}
div.singleline {
    max-height: 1.5em;
}
div::after {
    content: '...';
    position: absolute;
    bottom: 0;
    right: 0;
    width: 2em;
    text-align: center;
    background-color: #fff;
}