在單行文本的情況下,可以用來(lái)使超出范圍的文本用省略號(hào)隱藏:
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
但是當(dāng)遇到多行的文本,固定了高度的情況下,這又該如何寫(xiě)呢?
像下面這個(gè)文本一樣,結(jié)尾是 "..."
+------------------------------------------+ | Over the past day or so the vituperation | | against the iOS 6 Maps app, AKA the Maps | | app that makes you wish you were ... | +------------------------------------------+
認(rèn)證0級(jí)講師
Webkit支持一個(gè)名為-webkit-line-clamp的屬性,他其實(shí)是一個(gè)WebKit-Specific Unsupported Property
p { overflow : hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
http://jsfiddle.net/Cople/maB8f/
p { overflow: hidden; white-space: normal; height: 3em; text-overflow: -o-ellipsis-lastline; }
Demo: http://jsfiddle.net/Cople/ash5v/
參考自:http://c7sky.com/text-overflow-ellips...
簡(jiǎn)單地說(shuō),就是沒(méi)有標(biāo)準(zhǔn)的解決方案,對(duì)于這類(lèi)需求,最好在后端處理或者前端用腳本做截?cái)?/p>
可以參考這個(gè)鏈接:
http://www.mobify.com/dev/multiline-e...
利用
overflow:hidden;
position:relative;
::after
實(shí)現(xiàn),很巧妙。
微信掃碼
關(guān)注PHP中文網(wǎng)服務(wù)號(hào)
QQ掃碼
加入技術(shù)交流群
Copyright 2014-2025 http://ipnx.cn/ All Rights Reserved | php.cn | 湘ICP備2023035733號(hào)