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