CSS 文本換行的設置方法
當在對 HTML 網頁進行布局，或者在評論、上架商品內容的時候，常常會有較長的文本出現，因此對文本的換行和不換行，就需要進行設定。通過 HTML 和 CSS 設置，是一種非常方便和簡易的方法。
設置連續的英文字母及數字換行
在一個盒子模型中，如果一句話遇到了 div 的邊框，會自動進行換行，但是，對於連續的數字和英語則無效，這時候就需要調整 div 的 CSS 樣式進行強制斷行。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<style>
div{
width: 70px;
height: 100px;
background: green;
}
.con1,.con2{
border: 1px solid black;
}
</style>
</head>
<body>
<div class="con1">
This is a loooooooooooooooooooooooooooooooooooooooooong word.
</div>
<div class="con2">
This is a short word.
</div>
</body>
</script>
如果要對上面的長單詞或者較長的連續字母，進行強制換行，則需要添加一下屬性
<style>
.con1{
/* 對連續過長的字母和數字進行強制換行*/
word-wrap: break-word; /* 作用機制：首先新起一行來放置長單詞，新的行還是放不下這個長單詞則會對長單詞進行強制斷句，相當於僅對連續單詞和數字斷行，不包括空白*/
}
</style>
<style>
.con1{
/* 對整個文本設置換行*/
word-break: break-all; /* 作用機制：將整個文本包括空白在內視作一串，如果遇到邊界，則強制換行*/
}
</style>
CSS3 word-break 屬性
指定 非CJK腳本 的斷行規則，CJK腳本 是中國，日本和韓國（"中日韓"）腳本。
| 值 | 描述 |
|---|---|
| normal | 使用瀏覽器默認的換行規則。 |
| break-all | 允許在單詞內換行。 |
| keep-all | 只能在半角空格或連字符處換行。(safari、火狐不支持) |
<!DOCTYPE html>
<html>
<head>
<style>
p.test1
{
width:9em;
border:1px solid #000000;
word-break:keep-all;
}
p.test2
{
width:9em;
border:1px solid #000000;
word-break:break-all;
}
</style>
</head>
<body>
<p class="test1"> This paragraph contains some text. This line will-break-at-hyphenates.</p>
<p class="test2"> This paragraph contains some text: The lines will break at any character.</p>
</body>
</html>
CSS3 word-wrap 屬性
允許長的內容可以自動換行
| 值 | 描述 |
|---|---|
| normal | 只在允許的斷字點換行（瀏覽器保持默認處理）。 |
| break-word | 在長單詞或 URL 地址內部進行換行。 |