<div class="container">
  <h2>單行</h2>
  <p class="ellipsis1">我如果能夠遙望彼方，那完全是因為我站在巨人肩膀上的緣故。我可以。 你也行成為你想成為的人，成就你想成就的事。
  </p>
</div>

<div class="container">
  <h2>多行</h2>
  <p class="ellipsis2">我如果能夠遙望彼方，那完全是因為我站在巨人肩膀上的緣故。我可以。 你也行成為你想成為的人，成就你想成就的事。
  </p>
</div>
.container {
  width: 300px;
  padding: 10px;
  border: #e7ae01 2px solid;
  margin: 30px 10px;
}
.ellipsis1 {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.ellipsis2 {
  overflow: hidden;
  display: -webkit-box;
  text-overflow: ellipsis;
  -webkit-line-clamp: 2; /*行數*/
  -webkit-box-orient: vertical;
  white-space: normal;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.