<div class="text-content">
	<h1 class="text">
		Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur soluta itaque, vel velit sint aliquid, in saepe ad, reprehenderit eligendi ipsam sed totam sapiente earum! Quo cum quis libero adipisci.
		Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione repellat harum vel ducimus recusandae deserunt molestias repellendus aut, accusantium atque consectetur dolorum reprehenderit? Deserunt, totam quaerat quae excepturi earum dignissimos.
		Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam dignissimos eveniet aperiam illum eius, error amet eum, iste vel labore, quos ullam exercitationem iusto vitae est tempore reiciendis quibusdam fugiat.
		</>
</div>
* {
	margin: 0;
	font-size: 20px;
}

body {
	display: grid;
	place-content: center;
	height: 100vh;
	background: #1c212b;
}

.text-content {
	width: 300px;
	background-color: white;
	padding: 20px;
	border-radius: 6px;
}

/* use https://github.com/josephschmitt/Clamp.js for polyfill */

.text {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.