<section class="wrapper">
<div class="card">
<h2>One line</h2>
<p class="oneLine">Hello, I'm a very long text for at least three lines!</p>
</div>
<div class="card">
<h2>Modern Way</h2>
<p class="modernWay">Hello, I'm a very long text for at least three lines!</p>
</div>
<div class="card">
<h2>IE Support</h2>
<p class="ie11Support">Hello, I'm a very long text for at least three lines!</p>
</div>
</section>
<!-- https://www.albertwalicki.com/solutions/how-to-limit-text-to-n-lines -->
* {
box-sizing: border-box;
}
body {
height: 100vh;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
background: #78b9f3;
margin:0;
font-family: "Arial";
}
.wrapper {
display: flex;
justify-content: center;
}
.card {
background: #fff;
box-shadow: 0 4px 24px 3px rgb(0 0 0 / 10%);
padding: 20px;
margin: 20px;
width: 200px;
height: auto;
border-radius: 6px;
}
p {
font-size: 1em;
line-height: 1.3em;
margin:0;
}
h2 {
font-size: 1.5em;
margin: 0 0 0.5em 0;
}
.oneLine {
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
.modernWay {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
}
.ie11Support {
display: block;
overflow: hidden;
max-height: 2.6em;
line-height: 1.3em;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.