在CSS中,可以使用text-overflow
屬性來設置不換行用省略號,這個屬性指定了當文本溢出其包含元素的寬度時,應該如何顯示溢出的文本。
text-overflow
屬性可以有以下幾個值:
1、clip
:溢出的文本會被裁剪,并且不會顯示省略號。
2、ellipsis
:溢出的文本會顯示為省略號(...)。
3、string
:可以自定義溢出的文本顯示內(nèi)容。
如果你想要一個元素中的文本在不換行的情況下用省略號表示,你可以這樣設置:
.element { white-space: nowrap; /* 防止文本換行 */ text-overflow: ellipsis; /* 文本溢出時顯示省略號 */ width: 100px; /* 設置元素的寬度 */ overflow: hidden; /* 隱藏溢出的文本 */ }
這樣,當文本超出元素的寬度時,就會顯示為省略號,而不會換行,注意,這種方法只適用于塊級元素(如div
、p
等),不適用于行內(nèi)元素(如span
),對于行內(nèi)元素,你需要先將其轉換為塊級元素或者行內(nèi)塊級元素(使用display: block
或display: inline-block
)。
版權聲明:除非特別標注,否則均為本站原創(chuàng)文章,轉載時請以鏈接形式注明文章出處。