翻譯自文章《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;
}複製程式碼上面這個技巧被稱呼為'對齊移動包裹'。
