CSS3中提供了一種在單行文本中使用省略號的方法,這種方法可以使長文本自動縮短并在結尾處添加省略號,以防止文本超出父容器的寬度。
要實現該效果,可以使用CSS3中的text-overflow屬性。text-overflow屬性有三種值:
text-overflow: clip; /*默認值,當文本溢出容器時,直接切斷*/ text-overflow: ellipsis; /*當文本溢出容器時,結尾處顯示省略號*/ text-overflow: string; /*當文本溢出容器時,結尾處顯示指定字符串*/
其中,我們需要使用的是第二個值:ellipsis。使用此值時,還需在樣式中添加white-space屬性和overflow屬性,其值分別設為 nowrap 和 hidden。這樣,就可以控制文本在一行中顯示,并在溢出時省略并顯示省略號。
p { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
在實際應用中,該方法可應用于表格、導航欄和橫向滾動條等各種場景。
上一篇css radio顏色
下一篇css p的樣式