在網頁制作過程中，經常會遇到一種情況：一個無序列表的某些項文字太長，超出了容器的寬度，導致頁面排版出現問題。為了解決這個問題，可以使用 CSS 樣式來控制列表項的換行。
首先，我們需要先了解一些 CSS 常用屬性：
1. word-wrap: 控制是否允許單詞內自動換行，可選值為 normal、break-word 和 initial。
2. white-space: 控制如何處理元素內的空白符，可選值為 normal、nowrap、pre、pre-wrap 和 pre-line。
3. text-overflow: 控制當文本溢出容器后，如何處理，可選值為 clip 和 ellipsis。
接下來我們就可以使用這些屬性來實現列表項的換行了，具體代碼如下：
li {
word-wrap: break-word; /* 允許單詞內自動換行 */
white-space: normal; /* 處理空白符 */
text-overflow: ellipsis; /* 處理文本溢出 */
display: -webkit-box; /* 使溢出文本出現省略號 */
-webkit-box-orient: vertical;
-webkit-line-clamp: 2; /* 最多顯示兩行 */
}以上代碼表示，當 li 元素內的文本超過容器的寬度時，會自動換行，空白符也將按照正常文本處理。當文本溢出容器后，將顯示省略號（...）演示效果如下：- 這是一條巨長的文字這是一條巨長的文字這是一條巨長的文字這是一條巨長的文字這是一條巨長的文字
- 這是一條短小的文字
- 這也是一條巨長的文字這也是一條巨長的文字這也是一條巨長的文字