<article>
  <h3 class="single-ellipsis">這是一個很長的標題超過一行就會隱藏,還包含 English text 可以再更多更多字,請再試試看,超過一行就會隱藏接下來的文字</h3>
  <p class="multiline-ellipsis">這是一段很長的段落文字至少超過兩行,還包含 English text 可以再更多更多更多更多字。這是一段很長的段落文字至少超過兩行,還包含 English text 可以更多更多更多更多字,請再試試看。請再試試看,超過五行就會隱藏接下來的文字。這是一段很長的段落文字至少超過兩行,還包含 English text 可以再更多更多字。</p>
</article>
body {
  margin: 0;
  padding: 0;
  font: 100%/1.7 sans-serif;
  background: #eee;
}
:last-child {
  margin-bottom: 0;
}
article {
  margin: 40px auto;
  padding: 30px;
  max-width: 300px;
  background: #fff;
  box-shadow: 0 5px 15px rgba(0,0,0,.25);
}
h3 {
  margin: 0 0 .5em 0;
  line-height: 1.4;
}
.single-ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.multiline-ellipsis { 
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 5;
  overflow: hidden;
  
  /* line-clamp: 5; */
  
  /*
  display: flex;
  flex-direction: column;
  line-clamp: 5;
  overflow: hidden;
  */
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.0/jquery.min.js