在 HTML 中,當一行文本太長,無法完整地顯示在頁面中時,就需要將其折行處理。而使用 CSS 中的“折行(word-wrap)”屬性,可以使文本按照指定的長度進行自動折行。
/* 設置每行最大寬度為100像素 */ p { word-wrap: break-word; width: 100px; }
在這個例子中,使用了“break-word”參數來指定文本折行的方式。如果你希望文本在單詞之間進行折行,可以改用“normal”參數。而在設置寬度的同時,你也可以使用“max-width”屬性來限制文本占用的最大寬度。
/* 設置每行最小寬度為80像素 */ p { word-wrap: break-word; max-width: 400px; min-width: 80px; }
此外,在處理一些特定的文本內容時,你也可以使用“text-overflow”屬性來顯示省略號等標記,標示文本內容被截斷。比如在顯示長標題時,可以將其設置為一個固定的寬度,并使用省略號來表示標題的未顯示部分。
/* 設置標題顯示為單行,并使用省略號表示未顯示的內容 */ h1 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 200px; }
總之,在網頁設計中,合理運用折行屬性能夠使頁面中的文本更加清晰易讀,增強用戶體驗。
上一篇蘋果css字體