-webkit-line-clamp

short code start

   h2 {
            display: -webkit-box;
            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }

short code end

<div class="blog-card">
  <div class="blog-img">
    <img [src]="data?.pictureUrl" alt="" />
  </div>
  <div class="blog-card-body">
    <div class="blog-date">
      <span>{{ data?.startDate }}</span>
    </div>
    <div class="blog-title">
      <h3>{{ data?.title }}</h3>
    </div>
    <div class="blog-des">
      <p>{{ data?.summary }}</p>
    </div>
    <div class="blog-read">
      <a href="#">Read More</a>
    </div>
  </div>
</div>

@import "../../../../theme/variable";

.blog-card {
  overflow: hidden;
  cursor: pointer;

  .blog-img {
    img {
      height: 210px;
      border-radius: 10px;
    }
  }

  .blog-card-body {
    padding: 15px 20px 35px 20px;
    box-sizing: border-box;

    .blog-date {
      margin-bottom: 15px;

      span {
        color: $text-color;
        font-family: $font-en-primary;
        font-style: normal;
        font-weight: 400;
        font-size: $font-size-14;
        display: block;
        line-height: 26px;
      }
    }

    .blog-title {
      margin-bottom: 15px;

      h3 {
        color: $color-black-sec;
        font-size: 28px;
        line-height: 34px;
        display: block;
        font-style: normal;
        font-family: $font-en-primary;
        font-weight: 600;
        transition: all 0.3s linear;
        height: 68px;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;

        &:hover {
          color: $color-nill;
          text-decoration: underline;
        }
      }
    }

    .blog-des {
      margin-bottom: 30px;

      p {
        font-size: $font-size-16;
        line-height: 24px;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
        font-family: $font-en-primary;
        font-weight: 400;
        opacity: 0.7;
      }
    }

    .blog-read {
      a {
        color: $color-nill;
        font-family: $font-en-primary;
        font-weight: 600;
        font-size: $font-size-16;
        text-decoration: underline;
        cursor: pointer;
        transition: all 0.3s linear;

        &:hover {
          color: $primary-color;
        }
      }
    }
  }
}

@media (max-width: 1429px) {
  .blog-card {
    .blog-card-body {
      .blog-title {
        h3 {
          font-size: 23px;
          line-height: 29px;
        }
      }
    }
  }
}

@media (max-width: 556px) {
  .blog-card {
    .blog-img {
      img {
        height: 240px;
      }
    }

    .blog-card-body {
      .blog-title {
        h3 {
          font-size: 28px;
          line-height: 34px;
        }
      }

      .blog-des {
        p {
          font-size: 18px;
          line-height: 26px;
        }
      }

      .blog-read {
        a {
          font-size: 18px;
          line-height: 26px;
        }
      }
    }
  }
}