css實現文本溢出顯示...

標籤：

　　在網頁中顯示文字內容時，經常會碰到文字內容特別長的情況，那麼這個時候為了使網頁看起來比較美觀和簡潔，會對內容進行處理。下面我們就來看一看，如何使用css來對文字溢出部分增加...。

　　首先來看第一種情況，對單行文文書處理。

<h2>單行溢出顯示...</h2><div class="single-line">我是單行文本我是單行文本我是單行文本我是單行文本我是單行文本我是單行文本我是單行文本我是單行文本</div>

　　頁面顯示的情況是這樣的。

接下來，我們來寫single-line的css，如下：

.single-line {
　　width: 500px;
　　text-overflow: ellipsis;
　　overflow: hidden;
　　white-space: nowrap;
　　display: block;
}

然後，重新整理頁面，會發現是這樣的。

第二種情況，就是對多行文本進行處理，html如下：

<h2>多行溢出顯示...</h2><div class="multi-line">我是多行文本我是多行文本我是多行文本我是多行文本我是多行文本我是多行文本我是多行文本我是多行文本</div>

預覽結果是這樣的，

然後編寫，multi-line的css,

.multi-line {
　　width: 500px;
　　height: 55px;
　　word-break: break-all;
　　overflow: hidden;
　　text-overflow: ellipsis;
　　display: -webkit-box;
　　-webkit-line-clamp: 3;
　　-webkit-box-orient: vertical;
}

再看，我們的目的就達到了。

ps:這種寫法只支援webkit核心的瀏覽器。

 

css實現文本溢出顯示...