<article>
  <h3 class="single-ellipsis">這是一個很長的標題超過一行就會隱藏，還包含 English text 可以再更多更多字，請再試試看，超過一行就會隱藏接下來的文字</h3>
  <p class="multiline-ellipsis">"As Chiang becomes more refined through life, the glistens of time, like fine nectar after a long period of brewing, also flow between life and art in a freer way--whether the light within his heart or natural daylight, he can always unfetteredly convert it into fleeting inspiration at this stage</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;
  word-break: break-word;        /* Breaks the word properly */
  white-space: normal;           /* Allows the text to wrap normally */

  /* line-clamp: 5; */
  
  /*
  display: flex;
  flex-direction: column;
  line-clamp: 5;
  overflow: hidden;
  */
}