如果文字多了，想讓超出元素外面的文字以省略號顯示的css樣式
阿新 • • 發佈：2019-01-30
請看下面的demo
頁面上的結果是這樣的<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>省略號顯示</title> <style type="text/css"> .box{ width: 200px; height: 20px; line-height: 20px; background: blue; } </style> </head> <body> <div class="box">一步一步走到天亮的部落格，寫的簡單明瞭，易懂，當然我有點自戀。</div> </body> </html>
文字超出了元素，並且自動換行
如果想讓元素外面的文字以省略號顯示，那麼就加上如下程式碼
.box{
width: 200px;
height: 20px;
line-height: 20px;
background: blue;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}結果就是這樣的
超出元素的文字部分，就會以三個省略號的形式顯示了
那麼文字不換行呢？
只加一個屬性即可 ：white-space：nowrap；
結果就是這樣的.box{ width: 200px; height: 20px; line-height: 20px; background: blue; white-space: nowrap; }
