CSS 是用來美化網頁樣式的語言，其中一個常用的屬性是

text-overflow

，它可以控制文本內容過長時如何處理。常見的情況是，當一個元素中的文本內容超出了它指定的寬度時，瀏覽器默認會將它截斷并顯示省略號，如下：

.text {
width: 100px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}

上述代碼表示，當 .text 元素中的文本內容超出 100px 時，隱藏超出的部分，并用省略號表示。但如果我們想要顯示前面的 4 個字，該怎么辦？可以使用 CSS 的偽元素

::before

和

content

屬性來實現：

.text::before {
content: attr(data-text);
}
.text {
width: 100px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}

上述代碼中，我們將要顯示的文本內容通過

data-text

屬性傳遞給了偽元素

::before

，然后用 CSS 控制這個偽元素的樣式，使它在 .text 元素之前顯示指定的文本內容。

使用上述代碼，可以實現只顯示 4 個字的效果。但需要注意的是，這種做法并不適用于所有情況，因為在不同的瀏覽器和設備上，文字的顯示效果可能會有所不同。