在CSS中,有一種很有用的文本樣式叫做“文字自動填充寬度”(text-overflow: ellipsis)。當你的文本內容過長超出了容器的寬度時,它可以讓文本自動省略,并且自動添加省略號來展示。
.overflow { width: 200px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
上面這些屬性可用于文本元素或塊元素上。首先,我們設置文本容器的寬度為200px,然后將white-space屬性設置為nowrap,這是必須的,因為它會防止文本換行。接下來,將overflow屬性設置為hidden,這是因為當文本超過容器寬度時,我們需要隱藏它的溢出部分。最后,使用text-overflow: ellipsis來自動添加省略號。
請注意,除了使用text-overflow屬性之外,你還需要設置white-space和overflow屬性。當你使用text-overflow樣式時,請務必確保元素具有確定的寬度,否則此樣式將不起作用。
總之,如果您需要讓長段落或標題自動縮短并自動省略,而不會影響您網站的外觀或導致內容截斷,那么“文字自動填充寬度”是非常有用的樣式。
上一篇css數字識別不了寬度
下一篇css文本屬性修飾