<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;
}