CSS中提供了一種超出部分中文內(nèi)容隱藏的方式,這在某些場景下非常實(shí)用。比如,當(dāng)一個(gè)長標(biāo)題在頁面上顯示不下時(shí),可以采用這種方法進(jìn)行截?cái)唷>唧w實(shí)現(xiàn)方式如下:
.ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
解釋一下上面的代碼,首先overflow屬性的值設(shè)為hidden,表示超出的內(nèi)容將被隱藏而不是被顯示。然后使用text-overflow屬性,將多余的文本內(nèi)容以省略號(hào)形式表示(即“...”)。最后,white-space屬性的值設(shè)為nowrap,表示文本不自動(dòng)換行。
那么,將上述CSS代碼應(yīng)用到中文文本上的時(shí)候,還需要注意一些事項(xiàng)。因?yàn)橹形暮陀⑽牟煌形膯卧~與單詞之間沒有空格,所以需要進(jìn)一步調(diào)整樣式sheet。具體來說,需要將white-space屬性的值改為normal,同時(shí)加一行代碼:word-break: break-all。這樣,中文單詞之間就會(huì)自動(dòng)斷行。
.ellipsis-cn { overflow: hidden; text-overflow: ellipsis; white-space: normal; word-break: break-all; }
由于這種方法只是從視覺上達(dá)到截?cái)嗟男Чo真正地刪去超出部分的文本,因此可以添加一個(gè)鼠標(biāo)懸停提示,讓用戶看到完整文本信息。實(shí)現(xiàn)方式很簡單,只需要在HTML標(biāo)簽上添加title屬性,并將其內(nèi)容設(shè)為完整的文本即可。
上述是一種比較通用的中文隱藏截?cái)喾椒ǎm用于大部分情況。當(dāng)然,在某些更特殊的需要中,還可能需要更多的自定義調(diào)整,以實(shí)現(xiàn)最佳效果。