由于文本內(nèi)容長度的不同,很多時候我們需要在元素的邊緣處進行換行。CSS為我們提供了一個非常簡單且有效的解決方案。
首先,我們可以使用“word-break”屬性來控制文本的換行方式。這個屬性有兩個常用的取值:“break-all”和“keep-all”。前者表示可在任意位置將文本劃分為新行,后者表示只能在半角空格或連字符處進行換行。
例如,下面的代碼將長文本內(nèi)容進行了兩種方式的換行:
p { width: 200px; word-break: break-all; }
此處是一個非常長的非常長的非常長的非常長的非常長的非常長的非常長的非常長的非常長的非常長的非常長的非常長的非常長的非常長的非常長的非常長的單詞
p { width: 200px; word-break: keep-all; }
此處是一個非常長的非常長的非常長的非常長的非常長的非常長的非常長的非常長的非常長的非常長的非常長的非常長的非常長的非常長的非常長的非常長的單詞
另外,如果我們希望在元素邊緣處進行自動換行,可以使用“word-wrap”屬性。這個屬性有一個可選取值:“break-word”,表示在單詞的中間進行自動換行。 例如,下面的代碼將長文本內(nèi)容在元素的邊緣處進行了自動換行:p { width: 200px; word-wrap: break-word; }
此處是一個非常長的非常長的非常長的非常長的非常長的非常長的非常長的非常長的非常長的非常長的非常長的非常長的非常長的非常長的非常長的非常長的單詞
在控制文本換行時,我們可以根據(jù)實際需要選擇不同的屬性值,以達到最佳視覺效果。上一篇jq的css怎么表達式