在網(wǎng)頁開發(fā)中，我們經(jīng)常會遇到一些文字超長需要換行的情況，比如段落文本、導(dǎo)航欄等等。但是有時(shí)候我們會發(fā)現(xiàn)使用CSS無法使長文字自動換行，這該怎么辦呢？

/*以下為錯(cuò)誤示范*/
p{
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/*以下為正確示范*/
p{
white-space: pre-wrap;
word-break: break-all;
}

首先給大家普及幾個(gè)CSS屬性：

white-space: pre-wrap;

該屬性用于定義元素中如何處理空格以及換行符號。它會保留所有的空格和換行。當(dāng)遇到單詞太長而無法在同一行完全顯示時(shí)，會自動進(jìn)行換行。

word-break: break-all;

該屬性用于控制單詞是否允許被斷開，它會將長單詞強(qiáng)制斷行換行，而不是將單詞完整地移動到下一行去。

因此，在正確示范下的p標(biāo)簽中，當(dāng)我們遇到長單詞時(shí)，會強(qiáng)制將該單詞斷行換行，而不是將單詞移到下一行去，從而保證長文字的自動換行。

需要注意的是，如果我們想在長文字的換行處自動添加省略號，我們需要使用 text-overflow: ellipsis; 這個(gè)屬性指定省略號出現(xiàn)的位置，但是該屬性只有在元素寬度固定的情況下才能生效。