CSS中，如何處理短內容和長內容？

做者：shadeed 譯者：前端小智 來源：ishadeed

點贊再看，微信搜索**【大遷世界】,B站關注【前端小智】**這個沒有大廠背景，但有着一股向上積極心態人。本文 GitHub github.com/qq449245884… 上已經收錄，文章的已分類，也整理了不少個人文檔，和教程資料。

最近開源了一個 Vue 組件，還不夠完善，歡迎你們來一塊兒完善它，也但願你們能給個 star 支持一下，謝謝各位了。

github 地址：github.com/qq449245884…

當咱們使用 CSS 構建佈局時，考慮長短文本內容很重要，若是能清楚地知道當文本長度變化時須要怎麼處理，能夠避免不少沒必要要的問題。

在許多狀況下，添加或刪除一個單詞會改變 UI 的外觀，更糟的是，它可能會破壞原有的設計，使其沒法訪問。在我學習 CSS 的早期，我低估了添加或刪除一個單詞的做用。在本文中，我會介紹幾種不一樣的技巧，智米們能夠立刻使用它們來處理CSS中不一樣長度的文本。

問題

在討論處理文本內容的技巧以前，先來解釋一下這個問題，假設咱們有一個垂直導航。

名字的長度能夠變化，特別是若是你是在一個多語言網站工做。在上面的示例中，隨着名稱變長，它被包裝到第二行。這裏有一些問題

• 應該把這段文字截短嗎

• 應該換成多行嗎？ 若是是，最多能夠換行多少行？

這種狀況下單詞比預期的多，可是當單詞太長時會發生什麼呢?默認狀況下，它將溢出其容器。

做爲專業前端開發人員，重要的是要肯定在這種狀況下應該要知道怎麼處理。 幸運的是，有一些CSS屬性就是專門用於解決此類問題。

除此以外，問題不只在於長內容，短內容也會破壞UI，或者至少會讓它看起來很奇怪。以下面的示例

帶有ok文本的按鈕的寬度很是小。我並非說這是一個致命的問題，但它會讓按鈕看起來很弱或很難被注意到。

在這種狀況下咱們該怎麼辦？ 也許在按鈕上設置min-width？ 不管內容長度如何，均可以提供安全的寬度。

長內容

在，你們已經對問題有所瞭解，咱們接着深刻研究CSS 技巧，這些技巧可爲處理長內容提供解決方案。

overflow-wrap

CSS 屬性 overflow-wrap 是用來講明當一個不能被分開的字符串太長而不能填充其包裹盒時，爲防止其溢出，瀏覽器是否容許這樣的單詞中斷換行。

Hyphens

CSS 屬性 hyphens 告知瀏覽器在換行時如何使用連字符鏈接單詞。能夠徹底阻止使用連字符，也能夠控制瀏覽器何時使用，或者讓瀏覽器決定何時使用。

.element {
  hyphens: auto;
}
複製代碼

文本截斷處理

截斷是指在句子的末尾添加點，以代表有更多的文本內容。

沒有text-truncation屬性或其餘屬性，可是它混合了一些CSS屬性，能夠爲咱們完成工做。

.element {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
複製代碼

多行文本截斷處理

若是要截斷多個行，可使用line-clamp屬性。

.element {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
複製代碼

要讓這種工做，必須使用display: -webkit-box。-webkit-line-clamp指定截斷工做的最大行數。

這種技巧的缺點是，若是要爲元素添加padding，它很容易失敗。當添加padding時，會致使顯示下一行的一部分，這本應該要被截斷的。見下圖：

水平滾動

有時候，截斷或鏈接一個單詞並不老是可行。 例如，當一個長字換成新行時，JavaScript代碼可能會變得難以閱讀。 在這種狀況下，水平滾動將使閱讀體驗更好。

Padding

在某些狀況下，你們可能會忘記添加padding，直到咱們注意到一個視覺問題。考慮如下問題：

這裏有一個複選框列表，其中有一個很是接近它的兄弟項。發生這種狀況的緣由是網格上沒有間距。這是來自Techcrunch網站的一個真實的例子。

短內容

這對你們來講並不常見，但在設計和構建UI時，也是一個要重要考慮的事項。

設置一個最小寬度

回到本文開頭向你們展現的一個示例。 咱們要如何加強它並使按鈕看起來更好？

咱們能夠經過在按鈕上添加min-width來解決此問題，這樣一來，它就不會低於該寬度。

如今你們已經對問題及其解決方案有了必定的瞭解，咱們來探索web上的一些用例和示例。

用例和示例

我的資料卡

這是長內容的常見示例。 很難預測名稱的長度。 咱們應該如何應對呢？

/* 方案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;
}
複製代碼

導航項

在處理多語言佈局時，內容長度會發生變化。考慮如下示例

LTR(從左到右)的導航項About比RTL(從右到左)的導航項大。在RTL中，項目看起來過小了。可點擊區域過小不利於用戶體驗。咱們能作什麼?在這種狀況下，最好爲導航項設置最小寬度。

.nav__item {
  min-width: 50px;
}
複製代碼

文章內容

一個長詞或一個連接是很常見的，尤爲是在手機上。考慮如下

上面有一個很長的單詞，它會上容器溢出致使水平滾動。咱們能夠經過使用overflow-wrap或hyphens來解決這個問題。

.article-content p {
  overflow-wrap: break-word;
}
複製代碼

購物車

產品名能夠從一個單詞到多行不等。在本例中，因爲沒有在它們之間添加足夠的間距，產品名稱太接近刪除按鈕。

這個解決方案能夠經過添加padding或margin來實現，這取決於大家的上下文，爲了簡單起見，這裏使用margin解決方案。

.product__name {
  margin-right: 1rem;
}
複製代碼

Flexbox和長內容

flexbox
複製代碼

和長內容會發生某種行爲，從而致使元素溢出其父元素。 考慮如下示例：

html

<div class="user">
  <div class="user__meta">
    <h3 class="user__name">Ahmad Shadeed</h3>
  </div>
  <button class="btn">Follow</button>
</div>
複製代碼

css

.user {
  display: flex;
  align-items: flex-start;
}

.user__name {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
複製代碼

然而，當內容很長時，這就不起做用了。文本將溢出它的父文件。

緣由是 flex 項不會收縮到其最小內容大小如下。爲了解決這個問題，咱們須要在flex項目.user__meta上設置min-width: 0。

.user__meta {
  /* other styles */
  min-width: 0;
}
複製代碼

總結

我但願智米們已經學會了處理CSS中短內容和長內容的不一樣技巧。我很喜歡這篇文章，由於它幫助我記住了一些小細節，這對將來的項目會頗有幫助。

完~ 我是小智，咱們下期見~

---

代碼部署後可能存在的BUG無法實時知道，過後爲了解決這些BUG，花了大量的時間進行log 調試，這邊順便給你們推薦一個好用的BUG監控工具 Fundebug。

原文：isheed.com/article/css…

交流

文章每週持續更新，能夠微信搜索 【大遷世界 】 第一時間閱讀，回覆 【福利】 有多份前端視頻等着你，本文 GitHub github.com/qq449245884… 已經收錄，歡迎Star。