經(jīng)過

最近在幫自己學(xué)校的外語系做他們的系網(wǎng)，發(fā)現(xiàn)有個(gè)小地方要出現(xiàn)一段長文章的一部分，超出部分想著用省略號處理。

想起了text-overflow這個(gè)東東，問題是以前沒怎么用過這玩意，所以就傻愣愣的直接在一個(gè)p{}里寫上text-overflow

肯定是不行的，遇到問題就得解決問題呀。立馬寫個(gè)demo來學(xué)習(xí)。

發(fā)現(xiàn)

首先，文本容器一定要是block元素，inline是沒用的。然后文本會超出那肯定容器得有寬度，這些是前提。光有這些用text-overflow也是沒用滴。發(fā)現(xiàn)必須要同時(shí)兼具white-space:nowrap和overflow:hidder時(shí)才會出現(xiàn)省略號。

text-overflow中還有一個(gè)備選值是clip，就是裁剪超出的部分。個(gè)人覺得好像跟只有white-space:nowrap和overflow:hidder沒啥區(qū)別。。如果其實(shí)是有區(qū)別的，請大神指教！

至于第三個(gè)string，就是用別的字符來代替省略號如：overflow:"###" 不過不知道為什么我用chrome測試第三種沒用，firefox就可以

對了，這種方法迫使過長文本省略只能應(yīng)用在單行文本中。多行文本超出部分變省略號地方法目前我想到的就是用::after吧。。待我試試后再寫下來。

PS

如果大神們有什么更好的方法或者發(fā)現(xiàn)了我有什么做的不好的，望指出