CSS中的省略號代替文本超出一行的顯示,可以通過text-overflow屬性來完成。它是一個簡單的屬性,只有三個可選值:clip、ellipsis和string。
其中,clip表示剪切文本以適合其容器,而不顯示省略號。ellipsis用省略號代替多行文本。string則將字符串值插入文本。
.text { white-space: nowrap; /* 防止換行 */ overflow: hidden; /* 超出部分隱藏 */ text-overflow: ellipsis; /* 文本省略號表示 */ }
在使用text-overflow屬性時,文本必須具有指定的寬度,以便在其范圍內進行截斷。因此,我們需要使用white-space: nowrap這個屬性來防止文本換行,可以在使用省略號代替文本時保證效果。
需要注意的是,這個屬性必須同時和overflow和white-space屬性搭配使用,才能起作用。如果文本有換行符,則省略號不會起作用。
.text { width: 100px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
除了省略號代替,我們還可以使用CSS的其他屬性來處理文本超出一行的問題。比如加一個title屬性,鼠標懸浮時會顯示全部內容,或者使用CSS3的word-wrap屬性來在單詞之間斷開文本,但這些方法都需要根據實際情況選擇合適的方式。
上一篇淘寶移動端公共css
下一篇css起源地圖包