CSS實現限制顯示的字數，超出顯示"..."

阿豪聊乾貨發表於2016-05-14
CSS

一、背景

　　在實際專案中，我們常常需要對某些頁面的某些特定區域顯示指定數量的內容，超出的內容顯示"..."來進行美化頁面，那麼應該怎麼做呢？今天就讓我們來看看如何達到這一效果。

二、實現步驟

　　CSS程式碼

.ov{
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

這樣我們就實現了這一效果，但是限制條件是：所要顯示的內容只能在一行，不能有換行出現，否則不起作用。

測試程式碼

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 5         <title>測試超出顯示點點點</title>
 6         <style type="text/css">
 7             .ov{
 8                 white-space:nowrap;
 9                 overflow:hidden;
10                 text-overflow:ellipsis;
11                 width:200px;
12                 margin:30px auto;
13             }
14         </style>
15     </head>
16 <body>
17     <div class="ov">
18         測試顯示點點點測試顯示點點點測試顯示點點點測試顯示點點點測試顯示點點點測試顯示點點點測試顯示點點點測試顯示點點點測試顯示點點點測試顯示點點點測試顯示點點點測試顯示點點點測試顯示點點點測試顯示點點點測試顯示點點點測試顯示點點點
19     </div>
20 </body>
21 </html>

顯示效果如下：

相關文章