文本換行處理

02-04

今天來聊聊文本換行，有時候我們希望文本換行，有時候又希望不換行，以便我們實現各種文字效果。

默認情況下，英文和數字是不換行的，如果你沒有添加空格中斷的話：

這種效果顯然不是我們想要的，段落裡面的文本應該要換行才符合我們的閱讀習慣：

那上面這種效果是怎麼實現的呢？代碼很簡單，利用【word-break: break-all】即可實現。

雖然我們的中文是默認換行的，但如果你要強制中文顯示在一行的話，也是可以實現的：

中文強制不換行，英文數字強制換行的代碼實現如下：

<!DOCTYPE html>n<html lang="en">n<head>nt<meta charset="UTF-8">nt<title>Document</title>n</head>n<body>nt<style>ntdiv, p{nttmax-width: 200px;nttheight: 100px;nttborder:solid #000 1px;nt}nt.d1{ nttword-break: break-all;nt}nt.d2{word-break: keep-all;}nt</style>nt<h2>英文換行</h2>nt<div>english english english english english english english english </div>nt<div class="d1">english english english english english english english english </div>nt<h2>中文強制不換行</h2>nt<div class="d2">中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文</div>n</body>n</html>n

這裡可能有人會對【word-break: keep-all】這個屬性感到疑惑，這個的作用你可以查找一下手冊，這裡便不在贅述。

word-wrap是一個關於單詞折斷換行的屬性，其效果如下：

代碼如下：

<!DOCTYPE html>n<html lang="en">n<head>nt<meta charset="UTF-8">nt<title>Document</title>n</head>n<body>nt<style>ntdiv, p{nttmax-width: 180px;nttheight: 100px;nttborder:solid #000 1px;nt}nt.d1{ nttword-wrap: break-word;t}nt</style>nt<div>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>nt<h2>如果整一個單詞越界，則強制換行</h2>nt<div class="d1">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>nt<h2>如果需要換行的單詞，前面有內容，那麼單詞先放到下一行，如果還是越界了，那麼再進行換行</h2>nt<div class="d1">this is english this issssssssssssssssssssssssss aaa</div>n</body>n</html>n

這個屬性是針對英文單詞的換行處理，與中文換行無關。