圖文詳解CSS文字溢位顯示省略號效果（text-overflow）-css教學-PHP中文網

圖文詳解CSS文字溢位顯示省略號效果（text-overflow）

yulia

發布： 2018-09-27 10:19:15

原創

5296 人瀏覽過

在工作中常常會遇到文字溢出，需要顯示省略號的情況，那這個省略號是怎麼實現的呢？這篇文章就跟大家講講CSS中如何用text-overflow實現超出部分顯示省略號。對CSS文字溢出加省略號這個知識不熟悉的小夥伴可以參考一下，希望可以幫助到你！

text-overflow屬性表示當文字超出包含它的元素時，超出部分應該如何顯示。

寫法：text-overflow ： clip | ellipsis

屬性值描述:

clip：表示修剪文本，超出的部分不顯示省略標記

# ellipsis：表示當文字溢出時顯示省略標記（...）

注意：text-overflow只是用來說明文字溢出時用什麼方式顯示，如果要實現溢出時顯示省略號的效果，也必須要求文字在一行內顯示（white-space:nowrap）及溢出內容為隱藏（overflow:hidden），只有這樣才能實現文字溢出顯示省略號的效果，程式碼如下：

# text-overflow:ellipsis;

overflow:hidden;

white-space:nowrap;

舉例：生活不隻眼前的苟且，還有詩和遠方的田野。你赤手空拳來到人世間，為找到那片海不顧一切。當這句話超出規定的範圍後，給它設定不同的效果。程式碼如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div{border:1px solid #000000;width: 300px;white-space: nowrap;overflow: hidden;}
.a1{text-overflow: clip;}
.a2{text-overflow:ellipsis;}
</style>
</head>
<body>
<div class="a1">生活不止眼前的苟且，还有诗和远方的田野。你赤手空拳来到人世间，为找到那片海不顾一切</div>
<div class="a2">生活不止眼前的苟且，还有诗和远方的田野。你赤手空拳来到人世间，为找到那片海不顾一切</div>
</body>
</html>

登入後複製

效果圖：

圖文詳解CSS文字溢位顯示省略號效果（text-overflow）