CSS中可以用text-overflow屬性實現文字超過容器大小時的省略號顯示,即"..."。在實現過程中,需要設置以下三個樣式:
overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
上述代碼中overflow:hidden表示超出容器的部分將被隱藏,white-space:nowrap表示文本不可換行,text-overflow:ellipsis表示超出容器的文本用省略號顯示。
需要注意的是,該屬性只適用于單行文本,如果想要多行文本使用省略號顯示,需要借助JavaScript的幫助,并且需要根據實際情況進行調整。
此外,為了保證效果最佳,容器必須要有一個固定的寬度或者是最大寬度,否則省略號的顯示可能會出現問題。
上一篇css課件視頻
下一篇css超過字數顯示省略