CSS 文字限制字數、行數過長的文字隱藏”…”

****> CSS to make text overflow elegant is with ellipses, single or multiple lines

設計網頁常會使用…(三個點)文字限制字數長度，來符合設計的版面。

過去使用程式控制，但現在RWD網頁的關係，很多情況使用程式控制變的複雜許多，其實這樣的文字限制字數長度功能可以完全使用CSS達到目的，完全不需要用到很複雜的程式碼。

CSS text-overflow: ellipsis;

主要使用CSS屬性：

text-overflow: ellipsis;

單行:CSS限制字數長度多

HTML

  
我如果能夠遙望彼方，那完全是因為我站在巨人肩膀上的緣故。我可以。 你也行成為你想成為的人，成就你想成就的事。
  

CSS

.container {
  width: 300px;
  padding: 10px;
  border: #e7ae01 2px solid;
  margin: 30px 10px;
}
.ellipsis1 {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

多行:CSS限制字數長度多

HTML

  
多行
  
我如果能夠遙望彼方，那完全是因為我站在巨人肩膀上的緣故。我可以。 你也行成為你想成為的人，成就你想成就的事。
  

CSS

.ellipsis2 {
  overflow: hidden;
  display: -webkit-box;
  text-overflow: ellipsis;
  -webkit-line-clamp: 2; /*行數*/
  -webkit-box-orient: vertical;
  white-space: normal;
}

DEMO