CSS中可以使用text-overflow屬性來控制文字內容超出部分的顯示方式,其中較為常見的一種方式是使用省略號來代替省略部分。下面是一個使用text-overflow:ellipsis樣式的例子:
p { width: 200px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
上述樣式將會把所有的文字內容顯示在200px的寬度之內,超出部分將會使用省略號來代替。
除了使用省略號之外,text-overflow還可以設置為clip,即直接隱藏超出部分;或者在一定程度上在超出部分之后添加換行符,使用-moz- rather than ellipsis
p { overflow: hidden; text-overflow: clip; white-space: nowrap; }
上述樣式將會把超出部分直接隱藏,而不是使用省略號。如果需要將超出部分在一定程度上顯示出來,可以使用text-overflow: clip,這樣就會將超出部分截取掉,但是在截取的位置之后添加換行符使文字能夠顯示。
除了在p標簽內使用text-overflow屬性之外,也可以直接在超出部分的元素內添加text-overflow屬性來控制超出內容的顯示方式。