<h2>text-overflow</h2>
<span>CSS is awesome, especially when you can scroll to see extra text instead of just having it overlap other text by default.</span>

<h2>line-clamp</h2>
<p>CSS is awesome, especially when you can scroll to see extra text instead of just having it overlap other text by default.</p>
  
body {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100vh;
  background-image: linear-gradient(160deg, #44cbd4, #2881ef);
}

span, p {  
  width: 350px;
  border: 1px solid black;
  padding: 5px 20px;
  margin: 0;
  font-family: "Open Sans", sans-serif;
  font-size: 18px;
  line-height: 1.5;
  background-color: #f4eddf;
}

span {
  display: block;
  text-overflow: ellipsis;
  white-space: nowrap;  
  overflow: hidden;
}

p {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;  
  overflow: hidden;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.