Home » CSS3 研究室

[CSS3]word-break 文字斷行規則

[ 日期： | 瀏覽：51,057 | 迴響：1 ]
範例 1

word-break 屬性主要是用來設定亞洲語言(Chinese, Japan, Korea)及非亞洲語言文字的斷行規則。

檢視原始碼 CSS
1

word-break: normal | keep-all | break-all

首先來看未使用前：

檢視原始碼 HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

<style type="text/css">
	.div {
		width: 330px;
		border: 1px solid #000;
		margin: 10px 0;
		overflow: hi
	}
</style>
 
<body>
	<h3>未使用 word-break</h3>
	<div class="div">
		word-break 屬性主要是用來設定亞洲語言(Chinese, Japan, Korea)及非亞洲語言文字的斷行規則。這邊有一段很長長長長長長長長長長長長長長長長長長長長長長的中文。
	</div>
</body>

預設的 normal 則是依原本亞洲語言及非亞洲語言的文字斷行規則來進行換行；

檢視原始碼 HTML
1
2
3
4
5
6
7
8
9
10
11
12

<style type="text/css">
	.normal {
		word-break: normal;
	}
</style>
 
<body>
	<h3>word-break: normal</h3>
	<div class="div normal">
		word-break 屬性主要是用來設定亞洲語言(Chinese, Japan, Korea)及非亞洲語言文字的斷行規則。這邊有一段很長長長長長長長長長長長長長長長長長長長長長長的中文。
	</div>
</body>

keep-all 則讓亞洲語言文字不允許字斷開換行，適合用在有少量亞洲語言文字的內容；

檢視原始碼 HTML
1
2
3
4
5
6
7
8
9
10
11
12

<style type="text/css">
	.keep-all {
		word-break: keep-all;
	}
</style>
 
<body>
	<h3>word-break: keep-all</h3>
	<div class="div keep-all">
		word-break 屬性主要是用來設定亞洲語言(Chinese, Japan, Korea)及非亞洲語言文字的斷行規則。這邊有一段很長長長長長長長長長長長長長長長長長長長長長長的中文。
	</div>
</body>


目前只有 IE 才支援 keep-all 的設定。

而 break-all 則讓非亞洲語言文字可以任意的斷行，把每一個字母都當成一個字。較適合用在有少量非亞洲語言文字的內容。

檢視原始碼 HTML
1
2
3
4
5
6
7
8
9
10
11
12

<style type="text/css">
	.break-all {
		word-break: break-all;
	}
</style>
 
<body>
	<h3>word-break: break-all</h3>
	<div class="div break-all">
		word-break 屬性主要是用來設定亞洲語言(Chinese, Japan, Korea)及非亞洲語言文字的斷行規則。這邊有一段很長長長長長長長長長長長長長長長長長長長長長長的中文。
	</div>
</body>

而 Opera 及 Firefox 目前看來都不支援 word-break 的屬性，不管設什麼都是跟 normal 的一樣。

範例 1

檔案描述
基本的範例檔案(免空) 開始下載
基本的範例檔案 會員限定

1 筆針對 [CSS3]word-break 文字斷行規則 的迴響

發表迴響