CSS中可以使用text-overflow
屬性來控制文字超出長度后的顯示方式,該屬性指定了當(dāng)文本溢出其包含塊時(shí)發(fā)生的事情,以下是一些常見的值:
text-overflow: clip;
這是默認(rèn)值,表示溢出的文本會(huì)被裁剪,不顯示。
text-overflow: ellipsis;
表示溢出的文本會(huì)顯示為省略號(hào)(...)。
text-overflow: string;
可以使用自定義字符串來替代省略號(hào)。
如果你有一個(gè)寬度為200px的div,里面的文本長度超過了這個(gè)寬度,你可以使用以下CSS來設(shè)置文字超出長度后的顯示方式:
div { width: 200px; text-overflow: clip; white-space: nowrap; border: 1px solid #000; }
在這個(gè)例子中,如果文本長度超過200px,它將被裁剪并不顯示。white-space: nowrap;
屬性確保文本不會(huì)換行,這樣text-overflow
屬性才會(huì)生效,如果你沒有設(shè)置white-space
屬性,文本可能會(huì)自動(dòng)換行,導(dǎo)致text-overflow
無效。
text-overflow
屬性僅適用于塊級(jí)元素和行內(nèi)元素,如果你在一個(gè)行內(nèi)元素上設(shè)置了這個(gè)屬性,它將會(huì)影響該元素的寬度,使其適應(yīng)其內(nèi)容,而在塊級(jí)元素上設(shè)置這個(gè)屬性,將會(huì)影響元素的寬度和高度。