亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

搜索
javascript - 多行文本的情況下,用省略號(hào)“...”隱藏超出范圍的文本
PHP中文網(wǎng)
PHP中文網(wǎng) 2017-04-10 12:42:40
[JavaScript討論組]

在單行文本的情況下,可以用來(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 ...     |
+------------------------------------------+
PHP中文網(wǎng)
PHP中文網(wǎng)

認(rèn)證0級(jí)講師

全部回復(fù)(3)
PHP中文網(wǎng)

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>

PHP中文網(wǎng)

可以參考這個(gè)鏈接:
http://www.mobify.com/dev/multiline-e...

利用
overflow:hidden;
position:relative;
::after
實(shí)現(xiàn),很巧妙。

高洛峰

這個(gè)可以https://github.com/joe223/Aut...

最新下載
更多>
網(wǎng)站特效
網(wǎng)站源碼
網(wǎng)站素材
前端模板
關(guān)于我們 免責(zé)申明 意見(jiàn)反饋 講師合作 廣告合作 最新更新
php中文網(wǎng):公益在線(xiàn)php培訓(xùn),幫助PHP學(xué)習(xí)者快速成長(zhǎng)!
關(guān)注服務(wù)號(hào) 技術(shù)交流群
PHP中文網(wǎng)訂閱號(hào)
每天精選資源文章推送
PHP中文網(wǎng)APP
隨時(shí)隨地碎片化學(xué)習(xí)
PHP中文網(wǎng)抖音號(hào)
發(fā)現(xiàn)有趣的

Copyright 2014-2025 http://ipnx.cn/ All Rights Reserved | php.cn | 湘ICP備2023035733號(hào)