CSS中處理不同長(zhǎng)度文本的幾種小技巧

【推薦教程：CSS視頻教程 】

當(dāng)我們使用 CSS 構(gòu)建布局時(shí)，考慮長(zhǎng)短文本內(nèi)容很重要，如果能清楚地知道當(dāng)文本長(zhǎng)度變化時(shí)需要怎么處理，可以避免很多不必要的問題。

在許多情況下，添加或刪除一個(gè)單詞會(huì)改變 UI 的外觀，更糟的是，它可能會(huì)破壞原有的設(shè)計(jì)，使其無(wú)法訪問。在我學(xué)習(xí) CSS 的早期，我低估了添加或刪除一個(gè)單詞的作用。在本文中，我會(huì)介紹幾種不同的技巧，大家可以馬上使用它們來(lái)處理CSS中不同長(zhǎng)度的文本。

問題

在討論處理文本內(nèi)容的技巧之前，先來(lái)解釋一下這個(gè)問題，假設(shè)我們有一個(gè)垂直導(dǎo)航。

名字的長(zhǎng)度可以變化，特別是如果你是在一個(gè)多語(yǔ)言網(wǎng)站工作。在上面的示例中，隨著名稱變長(zhǎng)，它被包裝到第二行。這里有一些問題應(yīng)該把這段文字截短嗎

應(yīng)該換成多行嗎？ 如果是，最多可以換行多少行？

這種情況下單詞比預(yù)期的多，但是當(dāng)單詞太長(zhǎng)時(shí)會(huì)發(fā)生什么呢?默認(rèn)情況下，它將溢出其容器。

作為專業(yè)前端開發(fā)人員，重要的是要確定在這種情況下應(yīng)該要知道怎么處理。 幸運(yùn)的是，有一些CSS屬性就是專門用于解決此類問題。

除此之外，問題不僅在于長(zhǎng)內(nèi)容，短內(nèi)容也會(huì)破壞UI，或者至少會(huì)讓它看起來(lái)很奇怪。如下面的示例

帶有ok文本的按鈕的寬度非常小。我并不是說(shuō)這是一個(gè)致命的問題，但它會(huì)讓按鈕看起來(lái)很弱或很難被注意到。

在這種情況下我們?cè)撛趺崔k？ 也許在按鈕上設(shè)置min-width？ 無(wú)論內(nèi)容長(zhǎng)度如何，都可以提供安全的寬度。

長(zhǎng)內(nèi)容

在，大家已經(jīng)對(duì)問題有所了解，我們接著深入研究CSS 技巧，這些技巧可為處理長(zhǎng)內(nèi)容提供解決方案。

overflow-wrap

CSS 屬性 overflow-wrap 是用來(lái)說(shuō)明當(dāng)一個(gè)不能被分開的字符串太長(zhǎng)而不能填充其包裹盒時(shí)，為防止其溢出，瀏覽器是否允許這樣的單詞中斷換行。

Hyphens

CSS 屬性 hyphens 告知瀏覽器在換行時(shí)如何使用連字符連接單詞。可以完全阻止使用連字符，也可以控制瀏覽器什么時(shí)候使用，或者讓瀏覽器決定什么時(shí)候使用。.element {

hyphens: auto;

}

文本截?cái)嗵幚?/p>

截?cái)嗍侵冈诰渥拥哪┪蔡砑狱c(diǎn)，以表明有更多的文本內(nèi)容。

沒有text-truncation屬性或其他屬性，但是它混合了一些CSS屬性，可以為我們完成工作。.element {

white-space: nowrap;

overflow: hidden;

text-overflow: ellipsis;

}

多行文本截?cái)嗵幚?/p>

如果要截?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í)，會(huì)導(dǎo)致顯示下一行的一部分，這本應(yīng)該要被截?cái)嗟摹Ｒ娤聢D：

水平滾動(dòng)

有時(shí)候，截?cái)嗷蜻B接一個(gè)單詞并不總是可行。 例如，當(dāng)一個(gè)長(zhǎng)字換成新行時(shí)，JavaScript代碼可能會(huì)變得難以閱讀。 在這種情況下，水平滾動(dòng)將使閱讀體驗(yàn)更好。

Padding

在某些情況下，大家可能會(huì)忘記添加padding，直到我們注意到一個(gè)視覺問題。考慮以下問題：

這里有一個(gè)復(fù)選框列表，其中有一個(gè)非常接近它的兄弟項(xiàng)。發(fā)生這種情況的原因是網(wǎng)格上沒有間距。這是來(lái)自Techcrunch網(wǎng)站的一個(gè)真實(shí)的例子。

短內(nèi)容

這對(duì)大家來(lái)說(shuō)并不常見，但在設(shè)計(jì)和構(gòu)建UI時(shí)，也是一個(gè)要重要考慮的事項(xiàng)。

設(shè)置一個(gè)最小寬度

回到本文開頭向大家展示的一個(gè)示例。 我們要如何增強(qiáng)它并使按鈕看起來(lái)更好？

我們可以通過在按鈕上添加min-width來(lái)解決此問題，這樣一來(lái)，它就不會(huì)低于該寬度。

現(xiàn)在大家已經(jīng)對(duì)問題及其解決方案有了一定的了解，我們來(lái)探索web上的一些用例和示例。

用例和示例

個(gè)人資料卡

這是長(zhǎng)內(nèi)容的常見示例。 很難預(yù)測(cè)名稱的長(zhǎng)度。 我們應(yīng)該如何應(yīng)對(duì)呢？/* 方案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;

}

導(dǎo)航項(xiàng)

在處理多語(yǔ)言布局時(shí)，內(nèi)容長(zhǎng)度會(huì)發(fā)生變化。考慮以下示例

LTR(從左到右)的導(dǎo)航項(xiàng)About比RTL(從右到左)的導(dǎo)航項(xiàng)大。在RTL中，項(xiàng)目看起來(lái)太小了。可點(diǎn)擊區(qū)域太小不利于用戶體驗(yàn)。我們能做什么?在這種情況下，最好為導(dǎo)航項(xiàng)設(shè)置最小寬度。.nav__item {

min-width: 50px;

}

文章內(nèi)容

一個(gè)長(zhǎng)詞或一個(gè)鏈接是很常見的，尤其是在手機(jī)上。考慮以下

上面有一個(gè)很長(zhǎng)的單詞，它會(huì)上容器溢出導(dǎo)致水平滾動(dòng)。我們可以通過使用overflow-wrap或hyphens來(lái)解決這個(gè)問題。.article-content p {

overflow-wrap: break-word;

}

購(gòu)物車

產(chǎn)品名可以從一個(gè)單詞到多行不等。在本例中，由于沒有在它們之間添加足夠的間距，產(chǎn)品名稱太接近刪除按鈕。

這個(gè)解決方案可以通過添加padding或margin來(lái)實(shí)現(xiàn)，這取決于你們的上下文，為了簡(jiǎn)單起見，這里使用margin解決方案。.product__name {

margin-right: 1rem;

}

Flexbox和長(zhǎng)內(nèi)容flexbox

和長(zhǎng)內(nèi)容會(huì)發(fā)生某種行為，從而導(dǎo)致元素溢出其父元素。 考慮以下示例：

html

Ahmad Shadeed

Follow

css.user {

display: flex;

align-items: flex-start;

}

.user__name {

text-overflow: ellipsis;

white-space: nowrap;

overflow: hidden;

}

然而，當(dāng)內(nèi)容很長(zhǎng)時(shí)，這就不起作用了。文本將溢出它的父文件。

原因是 flex 項(xiàng)不會(huì)收縮到其最小內(nèi)容大小以下。為了解決這個(gè)問題，我們需要在flex項(xiàng)目.user__meta上設(shè)置min-width: 0。.user__meta {

/* other styles */

min-width: 0;

}

總結(jié)

我希望智米們已經(jīng)學(xué)會(huì)了處理CSS中短內(nèi)容和長(zhǎng)內(nèi)容的不同技巧。我很喜歡這篇文章，因?yàn)樗鼛椭矣涀×艘恍┬〖?xì)節(jié)，這對(duì)未來(lái)的項(xiàng)目會(huì)很有幫助。

創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎(jiǎng)勵(lì)來(lái)咯，堅(jiān)持創(chuàng)作打卡瓜分現(xiàn)金大獎(jiǎng)

總結(jié)

以上是生活随笔為你收集整理的html文本最小长度,CSS中处理不同长度文本的几种小技巧的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。