字符串過長CSS截取多余文字并用省略號顯示
發(fā)布時(shí)間：2014-06-16 15:34:16 作者：佚名 
我要評論
我要評論字符串過長，不雅觀，如何實(shí)現(xiàn)多余文字街去掉并用省略號顯示，苦思冥想多日，發(fā)現(xiàn)使用CSS就可輕松搞定，下面將經(jīng)驗(yàn)心得與大家分享一番，望幫助更多的失足新手
最近才知道css也有這么叼炸天的一面~~~
做個(gè)類似論壇的頁面，用戶頭像70px，但是用戶名沒法限定啊，英文中文都可以，你說他要是取個(gè)“我的名字好長呀，你該怎么辦呢”，那老衲不就狂急了~~
幸好，老衲于不幸中的萬幸中發(fā)現(xiàn)了css這么叼炸天的一面，以前一直不知道，寫出來分享給大家
很簡單，話不多說，直接上代碼：
css里面如下設(shè)置：
a.name{
line-height: 30px;
text-align: center;
<span style="color:#ff0000;">text-overflow:ellipsis;</span>//讓超出的用...實(shí)現(xiàn)
<span style="color:#ff0000;">white-space:nowrap;</span>//禁止換行
<span style="color:#ff0000;">overflow:hidden;</span>//超出的隱藏
display: block;
}
我是用a標(biāo)簽寫的用戶名，所以要display:block一下。
唔，很簡單，不過很好用。（PS：不支持IE6?。?
做個(gè)類似論壇的頁面，用戶頭像70px，但是用戶名沒法限定啊，英文中文都可以，你說他要是取個(gè)“我的名字好長呀，你該怎么辦呢”，那老衲不就狂急了~~
幸好，老衲于不幸中的萬幸中發(fā)現(xiàn)了css這么叼炸天的一面，以前一直不知道，寫出來分享給大家
很簡單，話不多說，直接上代碼：
css里面如下設(shè)置：
復(fù)制代碼
代碼如下:a.name{
line-height: 30px;
text-align: center;
<span style="color:#ff0000;">text-overflow:ellipsis;</span>//讓超出的用...實(shí)現(xiàn)
<span style="color:#ff0000;">white-space:nowrap;</span>//禁止換行
<span style="color:#ff0000;">overflow:hidden;</span>//超出的隱藏
display: block;
}
我是用a標(biāo)簽寫的用戶名，所以要display:block一下。
唔，很簡單，不過很好用。（PS：不支持IE6?。?
相關(guān)文章
- 單行文本的控制，以前是由程序員完成的，2008-10-17
通過純CSS樣式實(shí)現(xiàn)DIV元素中多行文本超長自動(dòng)省略號
可以通過css樣式實(shí)現(xiàn)DIV元素中文本超長后自動(dòng)截?cái)嗖⒁允÷蕴柦Y(jié)尾，一般情況下都是使用javascript，其實(shí)使用純CSS樣式也可以做到
2014-05-05 css樣式顯示省略號自定義寬度超過隱藏顯示省略標(biāo)記
這篇文章主要介紹了css樣式怎么顯示省略號，即當(dāng)超過自定義寬度時(shí)隱藏顯示省略標(biāo)記，比較實(shí)用，需要的朋友可以參考下
2014-04-18
DIV CSS text-overflow文本有溢出時(shí)顯示css省略號clip ellipsis樣式基礎(chǔ)知識(shí)與用法實(shí)例經(jīng)驗(yàn)教程篇
2014-11-12
兼容瀏覽器的CSS控制字符寬度省略號效果，是非常實(shí)用的，由于FF對溢出顯示省略號的屬性支持不好。因而在進(jìn)行編碼時(shí)，應(yīng)用到了一個(gè)HACK和FF的私有屬性，大家在學(xué)習(xí)時(shí)注意區(qū)
2009-01-03
在項(xiàng)目中我們經(jīng)常需要在文本過長時(shí)顯示，將文本超出的部分內(nèi)容用省略號代替，基于css代碼是怎么實(shí)現(xiàn)的呢？下面腳本之家小編通過分析本文給大家詳解，感興趣的朋友一起學(xué)習(xí)
2016-01-19