六月 29, 2021

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

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

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

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

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

CSS text-overflow: ellipsis;

主要使用CSS屬性:

text-overflow: ellipsis;

單行:CSS限制字數長度多

HTML

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

CSS

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

多行:CSS限制字數長度多

HTML

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

CSS

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

DEMO


© UCAMC. All rights reserved.
Powered by CITIAR.