Question to say "I can!"

使用 text-overflow:ellipsis 實現 CSS 文本溢出省略號

2013-03-18

在現在標題文本的時候,我們都會發現一個問題,就是有些問題的標題比較長,為了顯示美觀,我們都會將列表的標題都設置為1行,如果超出的在最后顯示 …,也許你會使用 PHP 函數來計算文字個數,但是由于中英文字數算法和長度的問題,總是不能做到很完美的效果,原來我們可以通過定義元素的 text-overflow 這個 CSS 屬性實現文本溢出省略號。


.entry_title{
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

上面 CSS 第一行是設置強制文本在一行內輸出,第二行是設置溢出處理方式,這里是隱藏,第三行是設置文本溢出的處理方式,這里是末尾加上省略號。這樣簡單處理下,就能完美實現文本溢出省略號了。

作者:admin | Categories:設計問題 | Tags:

發表評論

電子郵件地址不會被公開。 必填項已用*標注

*

澳洲f1赛车b盘开奖套路 内蒙古11选5 日本黄色片 3d今晚试机号是多 麻生希在线电影 2019股票配资平台排行榜 石家庄按摩会所排行榜 大学生2000元能炒股开户买股票 2010足球直播 东方6十1历史开奖结果 上原亚衣的asmr完整版 北京赛车pk10 江苏十一选五走势图 拍摄av电影的日本女优为什么不害羞 捷报比分篮球推荐 天津十一选五 最新22选5开奖