摘要:本文將討論單行和多行文字省略的方案,特別是多行文字的省略,不像單行省略的解決方案那么簡單全面,故本文重點(diǎn)討論多行文字的方案。則不顯示超出容器的文字內(nèi)容,若無此屬性,文字會(huì)顯示超過容器而不省略。總結(jié)本文介紹的多余文字省略方案,都是較為常用的。
網(wǎng)頁前端開發(fā)過程中,后端傳來的文本數(shù)據(jù)長短不可控,如果接收到的文本非常長且又沒有作自適應(yīng)處理,頁面效果會(huì)十分可怕。自適應(yīng)處理在這種場(chǎng)景下確實(shí)很重要,不過,另一種解決方案同樣也可以考慮,那就是本文將要討論的省略多余文字,尤其是在移動(dòng)端屏幕資源有限的情況下,更應(yīng)該采用省略文字的解決方案。
本文將討論單行和多行文字省略的方案,特別是多行文字的省略,不像單行省略的解決方案那么簡單全面,故本文重點(diǎn)討論多行文字的方案。
單行文字的省略方案已經(jīng)有比較主流又有效的解決方案,就是CSS3的text-overflow屬性。該屬性能夠優(yōu)雅地完成所有單行文字省略的需求,而且覆蓋了目前市場(chǎng)上幾乎所有的瀏覽器版本(瀏覽器支持情況,請(qǐng)參考:http://caniuse.com/#search=te... )。
在使用中唯一需要注意的是要加上代碼:
.truncation { text-overflow: ellipsis; overflow: hidden; white-space: nowrap; }
white-space: nowrap 保證單行文字不會(huì)換行,若無此屬性文字會(huì)自動(dòng)換行而不會(huì)顯示省略號(hào)。overflow: hidden 則不顯示超出容器的文字內(nèi)容,若無此屬性,文字會(huì)顯示超過容器而不省略。
多行文字省略 方案一:-webkit-line-clamp(僅適用于webkit內(nèi)核瀏覽器)在webkit內(nèi)核的瀏覽器中,多行文字省略可以采用CSS屬性-webkit-line-clamp實(shí)現(xiàn)。
.multiple-line { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
其中overflow:hidden 保證超出行數(shù)的內(nèi)容不顯示;display: -webkit-box與-webkit-box-orient: vertical 表示采用-webkit-box顯示,其行數(shù)方向?yàn)榇怪薄?br>這種方法實(shí)現(xiàn)起來簡單明了,缺點(diǎn)就是受用面太窄,只適用于webkit內(nèi)核瀏覽器。而且,-webkit-box已經(jīng)被flex替代,后續(xù)不太可能被其他內(nèi)核瀏覽器支持。不過,由于大部分移動(dòng)端瀏覽器(Safari, Android Browser, Chrome)都是webkit內(nèi)核的,如果該頁面僅在移動(dòng)端瀏覽,那么這不失為一種最簡單有效的方案。
方案二:clamp.jsCSS搞不定的事情,只能交給JS了。
解決方案代碼,請(qǐng)參考這個(gè)倉庫~ https://github.com/yuanqing/l...
先按單詞截?cái)啵侔醋址M(jìn)行截?cái)唷卧~與字符的截?cái)喾椒愃疲越財(cái)嘧址乃悸窞槔?/p>
每次循環(huán)減少element.innerHTML一個(gè)字符;
觀察此時(shí)的element元素內(nèi)容的高度是否滿足要求的最大高度;
其中元素內(nèi)容的高度用element.offsetHeight獲取;
獲取要求的最大高度:由于傳入的是最大行數(shù),故而將其與line-height相乘得到(line-height可以由計(jì)算樣式獲得window.getComputedStyle(element).lineHeight);
function truncateByCharacter(element, maximumHeight, ellipsisCharacter) { const innerHTML = element.innerHTML; let length = innerHTML.length; while (length > 0) { element.innerHTML = innerHTML.substring(0, length).replace(TRAILING_WHITESPACE_REGEX, "") + ellipsisCharacter; if (element.offsetHeight <= maximumHeight) { return; } length--; } }
JS的解決方案相比CSS的更加靈活,如需要隱藏或顯示更多文字信息時(shí),則應(yīng)該采用clamp.js解決方案。
總結(jié)本文介紹的多余文字省略方案,都是較為常用的。單行文字解決方案中的text-overflow已經(jīng)足以應(yīng)對(duì)各種場(chǎng)景各種瀏覽器;而多行省略文字的解決方案較簡單的可采用-webkit-line-clamp方法,尤其是移動(dòng)端,若存在兼容性問題則參考clamp.js用JS來解決。
文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址:http://specialneedsforspecialkids.com/yun/50461.html
摘要:本文將討論單行和多行文字省略的方案,特別是多行文字的省略,不像單行省略的解決方案那么簡單全面,故本文重點(diǎn)討論多行文字的方案。則不顯示超出容器的文字內(nèi)容,若無此屬性,文字會(huì)顯示超過容器而不省略。總結(jié)本文介紹的多余文字省略方案,都是較為常用的。 網(wǎng)頁前端開發(fā)過程中,后端傳來的文本數(shù)據(jù)長短不可控,如果接收到的文本非常長且又沒有作自適應(yīng)處理,頁面效果會(huì)十分可怕。自適應(yīng)處理在這種場(chǎng)景下確實(shí)很重要...
摘要:本文將討論單行和多行文字省略的方案,特別是多行文字的省略,不像單行省略的解決方案那么簡單全面,故本文重點(diǎn)討論多行文字的方案。則不顯示超出容器的文字內(nèi)容,若無此屬性,文字會(huì)顯示超過容器而不省略。總結(jié)本文介紹的多余文字省略方案,都是較為常用的。 網(wǎng)頁前端開發(fā)過程中,后端傳來的文本數(shù)據(jù)長短不可控,如果接收到的文本非常長且又沒有作自適應(yīng)處理,頁面效果會(huì)十分可怕。自適應(yīng)處理在這種場(chǎng)景下確實(shí)很重要...
摘要:思路照片上面顯示文字,怎么實(shí)現(xiàn)呢將照片作為的背景呀效果圖多行文本溢出顯示我是一段很長的文字我是一段很長的文字我是一段很長的文字我是一段很長的文字我是一段很長的文字我是一段很長的文字我是一段很長的文字我是一段很長的文字單行文本溢出 思路:照片上面顯示文字,怎么實(shí)現(xiàn)呢?將照片作為div的背景呀! 效果圖: showImg(https://segmentfault.com/img/bVbuV...
摘要:思路照片上面顯示文字,怎么實(shí)現(xiàn)呢將照片作為的背景呀效果圖多行文本溢出顯示我是一段很長的文字我是一段很長的文字我是一段很長的文字我是一段很長的文字我是一段很長的文字我是一段很長的文字我是一段很長的文字我是一段很長的文字單行文本溢出 思路:照片上面顯示文字,怎么實(shí)現(xiàn)呢?將照片作為div的背景呀! 效果圖: showImg(https://segmentfault.com/img/bVbuV...
閱讀 770·2021-09-30 09:46
閱讀 3777·2021-09-03 10:45
閱讀 3609·2019-08-30 14:11
閱讀 2544·2019-08-30 13:54
閱讀 2255·2019-08-30 11:00
閱讀 2347·2019-08-29 13:03
閱讀 1554·2019-08-29 11:16
閱讀 3581·2019-08-26 13:52