您好,登錄后才能下訂單哦!
這篇文章主要介紹如何處理長短文本內(nèi)容的小技巧,文中介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們一定要看完!
當(dāng)我們使用 CSS 構(gòu)建布局時(shí),考慮長短文本內(nèi)容很重要,如果能清楚地知道當(dāng)文本長度變化時(shí)需要怎么處理,可以避免很多不必要的問題。
在許多情況下,添加或刪除一個(gè)單詞會改變 UI 的外觀,更糟的是,它可能會破壞原有的設(shè)計(jì),使其無法訪問。在我學(xué)習(xí) CSS 的早期,我低估了添加或刪除一個(gè)單詞的作用。在本文中,我會介紹幾種不同的技巧,智米們可以馬上使用它們來處理CSS中不同長度的文本。
在討論處理文本內(nèi)容的技巧之前,先來解釋一下這個(gè)問題,假設(shè)我們有一個(gè)垂直導(dǎo)航。
名字的長度可以變化,特別是如果你是在一個(gè)多語言網(wǎng)站工作。在上面的示例中,隨著名稱變長,它被包裝到第二行。這里有一些問題
應(yīng)該把這段文字截短嗎
應(yīng)該換成多行嗎? 如果是,最多可以換行多少行?
這種情況下單詞比預(yù)期的多,但是當(dāng)單詞太長時(shí)會發(fā)生什么呢?默認(rèn)情況下,它將溢出其容器。
作為專業(yè)前端開發(fā)人員,重要的是要確定在這種情況下應(yīng)該要知道怎么處理。 幸運(yùn)的是,有一些CSS屬性就是專門用于解決此類問題。
除此之外,問題不僅在于長內(nèi)容,短內(nèi)容也會破壞UI,或者至少會讓它看起來很奇怪。如下面的示例
帶有ok
文本的按鈕的寬度非常小。我并不是說這是一個(gè)致命的問題,但它會讓按鈕看起來很弱或很難被注意到。
在這種情況下我們該怎么辦? 也許在按鈕上設(shè)置min-width
? 無論內(nèi)容長度如何,都可以提供安全的寬度。
在,大家已經(jīng)對問題有所了解,我們接著深入研究CSS 技巧,這些技巧可為處理長內(nèi)容提供解決方案。
CSS 屬性 overflow-wrap
是用來說明當(dāng)一個(gè)不能被分開的字符串太長而不能填充其包裹盒時(shí),為防止其溢出,瀏覽器是否允許這樣的單詞中斷換行。
CSS 屬性 hyphens
告知瀏覽器在換行時(shí)如何使用連字符連接單詞??梢酝耆柚故褂眠B字符,也可以控制瀏覽器什么時(shí)候使用,或者讓瀏覽器決定什么時(shí)候使用。
.element { hyphens: auto; }
截?cái)嗍侵冈诰渥拥哪┪蔡砑狱c(diǎn),以表明有更多的文本內(nèi)容。
沒有text-truncation
屬性或其他屬性,但是它混合了一些CSS屬性,可以為我們完成工作。
.element { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
如果要截?cái)喽鄠€(gè)行,可以使用line-clamp
屬性。
.element { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
要讓這種工作,必須使用display: -webkit-box
。-webkit-line-clamp
指定截?cái)喙ぷ鞯淖畲笮袛?shù)。
這種技巧的缺點(diǎn)是,如果要為元素添加padding
,它很容易失敗。當(dāng)添加padding
時(shí),會導(dǎo)致顯示下一行的一部分,這本應(yīng)該要被截?cái)嗟?。見下圖:
有時(shí)候,截?cái)嗷蜻B接一個(gè)單詞并不總是可行。 例如,當(dāng)一個(gè)長字換成新行時(shí),JavaScript代碼可能會變得難以閱讀。 在這種情況下,水平滾動將使閱讀體驗(yàn)更好。
在某些情況下,大家可能會忘記添加padding
,直到我們注意到一個(gè)視覺問題??紤]以下問題:
這里有一個(gè)復(fù)選框列表,其中有一個(gè)非常接近它的兄弟項(xiàng)。發(fā)生這種情況的原因是網(wǎng)格上沒有間距。這是來自Techcrunch網(wǎng)站的一個(gè)真實(shí)的例子。
這對大家來說并不常見,但在設(shè)計(jì)和構(gòu)建UI時(shí),也是一個(gè)要重要考慮的事項(xiàng)。
回到本文開頭向大家展示的一個(gè)示例。 我們要如何增強(qiáng)它并使按鈕看起來更好?
我們可以通過在按鈕上添加min-width
來解決此問題,這樣一來,它就不會低于該寬度。
現(xiàn)在大家已經(jīng)對問題及其解決方案有了一定的了解,我們來探索web上的一些用例和示例。
這是長內(nèi)容的常見示例。 很難預(yù)測名稱的長度。 我們應(yīng)該如何應(yīng)對呢?
/* 方案1 */ .card__title { text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } /* 方案2 */ .card__title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
在處理多語言布局時(shí),內(nèi)容長度會發(fā)生變化??紤]以下示例
LTR(從左到右)的導(dǎo)航項(xiàng)About
比RTL(從右到左)的導(dǎo)航項(xiàng)大。在RTL中,項(xiàng)目看起來太小了??牲c(diǎn)擊區(qū)域太小不利于用戶體驗(yàn)。我們能做什么?在這種情況下,最好為導(dǎo)航項(xiàng)設(shè)置最小寬度。
.nav__item { min-width: 50px; }
一個(gè)長詞或一個(gè)鏈接是很常見的,尤其是在手機(jī)上??紤]以下
上面有一個(gè)很長的單詞,它會上容器溢出導(dǎo)致水平滾動。我們可以通過使用overflow-wrap
或hyphens
來解決這個(gè)問題。
.article-content p { overflow-wrap: break-word; }
產(chǎn)品名可以從一個(gè)單詞到多行不等。在本例中,由于沒有在它們之間添加足夠的間距,產(chǎn)品名稱太接近刪除按鈕。
這個(gè)解決方案可以通過添加padding
或margin
來實(shí)現(xiàn),這取決于你們的上下文,為了簡單起見,這里使用margin
解決方案。
.product__name { margin-right: 1rem; }
flexbox
和長內(nèi)容會發(fā)生某種行為,從而導(dǎo)致元素溢出其父元素。 考慮以下示例:
html
<p class="user"> <p class="user__meta"> <h4 class="user__name">Ahmad Shadeed</h4> </p> <button class="btn">Follow</button> </p>
css
.user { display: flex; align-items: flex-start; } .user__name { text-overflow: ellipsis; white-space: nowrap; overflow: hidden; }
然而,當(dāng)內(nèi)容很長時(shí),這就不起作用了。文本將溢出它的父文件。
原因是 flex 項(xiàng)不會收縮到其最小內(nèi)容大小以下。為了解決這個(gè)問題,我們需要在flex
項(xiàng)目.user__meta
上設(shè)置min-width: 0
。
.user__meta { /* other styles */ min-width: 0; }
以上是“如何處理長短文本內(nèi)容的小技巧”這篇文章的所有內(nèi)容,感謝各位的閱讀!希望分享的內(nèi)容對大家有幫助,更多相關(guān)知識,歡迎關(guān)注億速云行業(yè)資訊頻道!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。