在CSS中解決內容過長的問題

翻譯自文章 《Handling Long and Unexpected Content in CSS》

當咱們寫css的時候，有時候會忘記設計裏面存在的臨界狀況。舉個例子來講吧，當內容的長度超過了咱們的指望值，咱們也沒法解釋其中的可能性，頁面的設計極可能會所以而崩掉。咱們不能保證css老是會按照咱們指望的那樣工做，但至少咱們能夠用不一樣類型的內容來測試，以減小這種狀況的發生。

在這篇文章裏，咱們經過審查真實網站的各類的UI問題來解釋這些網站可能會崩潰的緣由。準備好了麼？來吧！

一個右側/左側有小圖標的按鈕

這是一個手風琴效果的開關按鈕。按鈕右側有一個小圖標用來強調它是可點擊的。然而當按鈕的區域不夠長的時候，按鈕上的文字會蓋住圖標。當咱們沒有考慮到較長內容的時候這種狀況就可能發生。

一個解決辦法是在右側增長足夠的padding值來適應圖標的大小

.button {
  padding-right: 50px;
}複製代碼

注意咱們是如何增長padding值來給圖標創造出一塊安全的顯示區域的，如今咱們能夠肯定按鈕的佈局不會再被破壞了。

輸入佔位符

當在咱們的論壇使用浮動標註模式的時候，特別是按鈕在右側的這種狀況，咱們須要充分的測試來避免由於佔位符過長而致使的問題。

一個解決辦法是給按鈕添加 position: relative，這樣會讓按鈕覆蓋在佔位符上層。

長名字

在這個設計中，圖片向左浮動，右側有做者名字的信息。當右側的信息長度過長的時候會發生什麼呢？毫無疑問佈局會崩掉。

這裏的問題是咱們只向左浮動了圖片，使得做者的名字移動到貼着它，可是這隻會在做者名字長度較短的時候纔會表現良好。

爲了使頁面佈局的適應性更強，咱們須要給這兩個元素都增長 width。更推薦的方式是使用flexbox，更適合這樣的小型組件。

文章內有長連接/單詞

有時文章內會包含該一些很長的超連接或者單詞，當在視窗很寬的時候可能不會形成問題。可是對於一些尺寸較小的設備，諸如手機或平板電腦，這可能會產生煩人的橫向滾動條。

對於這個問題咱們有兩個解決方案：

1)使用CSS word-break

.article-body p {
  word-break: break-all;
}複製代碼

word-break屬性在不一樣的瀏覽器內表現不太同樣，所以在使用的時候須要充分測試。

2) 給外層元素添加overflow和 text-overflow

.article-body p {
  overflow: hidden;
  text-overflow: ellipsis;
}複製代碼

這個方案對於過長的連接比較友好，對於長單詞，我推薦使用 word-break。

過長的文章標籤

當咱們放置一個文章標籤在卡片上，咱們最好只經過設定它的padding來肯定它的大小。當標籤的內容過長的時候，寫死高度和寬度可能會形成佈局崩掉。

也能夠給標籤設定一個最小的寬度，當對padding包裹的標籤內容元素使用min-width屬性時，寬度是動態變化的，問題就解決了。

帶有固定連接的段落頭

這個例子是在段落標題的右側有一個‘view more’連接。有幾種不一樣的方式來編寫CSS，其中一種是對連接使用絕對定位。

當標題過長的時候可能會形成一些問題，一個更好的解決辦法是使用flexbox佈局，這樣的話當沒有足夠空間的時候會自動將連接擠到下一行去。

.header-2 {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
}複製代碼

上面這個技巧被稱呼爲'對齊移動包裹'。