在編寫(xiě)網(wǎng)頁(yè)時(shí)，CSS的樣式表扮演著非常重要的角色。其中，CSS標(biāo)簽中的文字換行也是不可忽視的細(xì)節(jié)。

在CSS中，文字換行是由“word-wrap”和“white-space”兩個(gè)屬性控制的。其中，“word-wrap”用于確定是否允許單詞自動(dòng)換行，而“white-space”則是用于控制頁(yè)面中的空格符是否會(huì)被換行。

word-wrap: break-word;   /* 允許單詞自動(dòng)換行 */
white-space: pre-line;   /* 空格符會(huì)被換行 */

如果不設(shè)置“word-wrap”屬性，那么在單詞過(guò)長(zhǎng)的情況下，該單詞將會(huì)貫穿整行并導(dǎo)致頁(yè)面布局混亂。例如：

p {
width: 200px;
border: solid 1px #ccc;
}
/* 效果如下圖所示 */
Thisisaverylongwordanditcannothelpbutrompallthewayacrossthepage ...

而當(dāng)設(shè)置了“word-wrap”屬性為“break-word”時(shí)，單詞將會(huì)自動(dòng)換行并保持整體性。例如：

p {
width: 200px;
border: solid 1px #ccc;
word-wrap: break-word;
}
/* 效果如下圖所示 */
Thisisaverylongwordanditcannothelpbutromp
allthewayacrossthepage ...

而對(duì)于“white-space”屬性的控制，如果沒(méi)有進(jìn)行設(shè)置的話，空格符是不會(huì)被換行的。例如：

p {
width: 200px;
border: solid 1px #ccc;
}
/* 效果如下圖所示 */
這是一段    包含了很    多空    格的  文  字  ...

而當(dāng)將“white-space”屬性設(shè)置為“pre-line”后，頁(yè)面中的空格符也會(huì)被正確地?fù)Q行。例如：

p {
width: 200px;
border: solid 1px #ccc;
white-space: pre-line;
}
/* 效果如下圖所示 */
這是一段
包含了很
多空
格的
文
字 ...

了解了CSS標(biāo)簽中文字換行的設(shè)置方法，我們就能夠更好地控制頁(yè)面的排版布局，展現(xiàn)更好的網(wǎng)頁(yè)效果。