HTML和CSS是網(wǎng)頁設(shè)計(jì)中最基礎(chǔ)的技術(shù)之一，它們共同構(gòu)成了網(wǎng)頁的基本骨架和樣式。在實(shí)際開發(fā)中，我們常常需要在頁面中添加大段文字或者代碼，這時(shí)就會(huì)遇到自動(dòng)換行的問題。

p {
/*設(shè)置字體、字號(hào)、行高等屬性*/
font-size: 16px;
line-height: 1.5;
word-wrap: break-word; /*開啟自動(dòng)換行*/
}

在上面的代碼中，我們通過設(shè)置word-wrap: break-word;屬性來實(shí)現(xiàn)段落自動(dòng)換行。當(dāng)一行文字超出了容器寬度時(shí)，break-word會(huì)將這個(gè)長單詞或長句子強(qiáng)制分割成若干個(gè)短詞，從而實(shí)現(xiàn)自動(dòng)換行的效果。

需要注意的是，在使用break-word屬性時(shí)需要設(shè)置好font-size、line-height等屬性，否則可能會(huì)出現(xiàn)不符合預(yù)期的問題。此外，在使用自動(dòng)換行時(shí)，我們還可以通過設(shè)置容器的寬度、高度、padding等屬性來進(jìn)一步控制自動(dòng)換行的結(jié)果。

pre {
/*設(shè)置字體、字號(hào)等屬性*/
font-family: monospace;
font-size: 14px;
/*開啟自動(dòng)換行*/
white-space: pre-wrap;
word-wrap: break-word;
/*設(shè)置容器的寬度、高度和padding*/
width: 80%;
height: 200px;
padding: 10px;
}

當(dāng)我們需要在網(wǎng)頁中展示代碼時(shí)，可以使用pre標(biāo)簽。與段落不同的是，在展示代碼時(shí)我們通常會(huì)使用等寬字體，因此在pre樣式中我們使用了monospace字體。同時(shí)，我們還需要開啟white-space: pre-wrap;屬性來保留代碼中的空格和換行符，從而實(shí)現(xiàn)代碼的格式保持。此外，我們還設(shè)置了容器的寬度、高度和padding等屬性，以便更好地控制展示效果。

綜上所述，通過正確地使用word-wrap等屬性，我們可以實(shí)現(xiàn)網(wǎng)頁上段落和代碼的自動(dòng)換行，讓頁面更加美觀和易讀。