CSS3 的 text-overflow 屬性可以用來控制文本溢出時的行為,其中一個選項是ellipsis(省略號)。當文本內容超過容器大小時,可以使用text-overflow: ellipsis來顯示省略號。不過,有時候我們不想在文本溢出時顯示省略號,而是希望文本不斷行。
white-space: nowrap;
上面這行代碼可以實現文本不自動換行,即一行中能放多少個字符就放多少個,不考慮容器大小是否足夠。
overflow: hidden;
同樣,如果我們希望文本超出容器部分不顯示,可以使用上面這行代碼。
text-overflow: ellipsis;
使用文本溢出時的選項之一:省略號。
以上三行代碼可以組合使用,實現文本不斷行且超出容器部分不顯示的效果:
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
在設置相應的 CSS 屬性后,文本就可以不斷行了。
在實際開發中,我們可以使用這些 CSS 屬性來調整文本在容器中的顯示效果,使頁面更美觀。