CSS文本單行顯示省略是一種非常常用的CSS技巧,并且在移動設備的Web應用程序中尤其有用。 在某些情況下,您可能不希望文本跨越兩行或更多行,而是希望將其限制在一個單獨的行中,這樣可以節(jié)省空間,增強可讀性。但是有時候,你的文本可能會超過一行的寬度,因此你可以使用CSS的文本溢出屬性來實現(xiàn)這個目的。
.ellipsis { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
以上CSS樣式將使單行文本顯示為省略號。其中,white-space: nowrap規(guī)定不允許換行;overflow: hidden規(guī)定超出部分隱藏;text-overflow: ellipsis規(guī)定溢出文本以省略號表示。
當然,這個樣式只適用于單行文本。如果你想省略多行文本,可以嘗試使用JavaScript實現(xiàn)。但是,使用CSS實現(xiàn)文本單行省略,是一種非常易于配置和使用的技巧,最好在Web應用程序和移動設備中考慮使用。
下一篇css文本開頭自動留空