CSS按單詞換行,是指在文本中的單詞邊界處自動換行。這樣做可以讓文本更加美觀,減少了不自然的斷行,并且讓瀏覽器更加智能地識別文本。要使CSS按單詞換行,我們可以使用“word-wrap”屬性。
p { word-wrap: break-word; }
上面的代碼會啟用CSS按單詞換行的功能,并且將文本按照單詞邊界來自動換行。此時如果文本過長,瀏覽器會自動將單詞拆開換行,而不是出現不自然的斷行。
需要注意的是,“word-wrap”屬性只在一定的條件下才會生效。在IE瀏覽器中,該屬性默認為“break-word”,可以自動換行。但在其他瀏覽器中,如Firefox和Chrome等,該屬性需要配合“white-space”屬性使用。
p { white-space: pre-wrap; word-wrap: break-word; }
使用“white-space”屬性設置為“pre-wrap”,可以讓瀏覽器保留文本中的空格和換行。這樣做可以保證文本的格式不變,且按單詞換行的功能依舊可以正常使用。
CSS按單詞換行是一個小技巧,但在排版時卻有著不可忽視的作用。能夠使文本更加美觀、易讀,讓用戶更加舒適地瀏覽網頁。