CSS溢出文本显示省略号的详细方法[CSS小知識]

在一個項目里面碰到的
在一個li容器里面,CSS限定寬度為300px;當我在這個容器里面加入大於300寬度的文字時,希望將超出300的文字去掉,同時,文字后面出現省略號
一開始總是想著在服務器端代碼里面去控制,但還是覺得有一些麻煩,網上找了一下資料,說在CSS里面用text-overflow:ellipsis實現,但我加上去以后,沒有效果
在網上找資料,找到一篇文章:http://www.mb5u.com/divcssjiaocheng/14015.html,原來text-overflow:ellipsis屬性是要和overflow:hidden,white-space:nowarp;一起用才有效果,以下是代碼:

.textOverFlow{text-overflow:ellipsis;white-space:nowarp;overflow:hidden;}

這個問題也讓我明白了:white-space的作用.呵呵呵,我是小菜鳥請不要見笑!

你可能感兴趣的:(css)