CSS3 單詞拆分word-break

提問人：劉團圓發(fā)布時間：2020-11-19

word-break屬性規(guī)定自動換行的處理方法，使用它可以讓瀏覽器實現(xiàn)在任意位置的換行。

word-break屬性的值可以使以下幾種：

?normal：使用瀏覽器默認的換行規(guī)則。

?break-all：允許在單詞內換行。

?keep-all：只能在半角空格或連字符處換行。

word-break和word-warp屬性都是關于自動換行的操作，它們之間有什么區(qū)別呢？通過一個實例來理解兩者的區(qū)別。

【例題】word-break屬性和word-warp屬性的區(qū)別

代碼如下：

<!DOCTYPE html>

<html>

<head>

<style>

p.test1{

width:11em;

border:1px solid #000000;

word-wrap: break-word;

}

p.test2{

width:11em;

border:1px solid #000000;

word-break:break-all;

}

</style>

</head>

<body>

<p class="test1">This is a veryveryveryveryveryveryveryveryveryvery long paragraph.</p>

<p class="test2">This is a veryveryveryveryveryveryveryveryveryvery long paragraph.</p>

</body>

</html>

相關視頻回答

回復(0)