英文字元和漢字自動換行和不換行的設定

預設設定，一長串英文字元（中間沒空格）不會自動換行，比如：aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa不能處理自動換行，而漢字字元卻可以自動換行。原因是：英文字母之間如果沒有空格，系統認為是一個單詞，就不會自動換行。漢字就沒有這種情況。

1、在需要強制設定換行時，

td中：

需用css來控制style='word-break: break-all'

div中 ：  

div 實作長英文字母自動換行CSS

IE浏覽器

#wrap{white-space:normal; width:200px; }

或者

#wrap{word-break:break-all;width:200px;}

Firefox浏覽器

#wrap{white-space:normal; width:200px; overflow:auto;}

或者

#wrap{word-break:break-all;width:200px; overflow:auto; }

2、在不需要換行時

style='word-break: keep-all'//不會自動換行，有空格換行，ie支援，ff不支援

要想相容ie和ff，需設定white-space: nowrap;，這樣設定，不論是英文還是漢字，也不管是否有空格都會不換行顯示

white-space : normal | pre | nowrap 

normal  :　 預設值。預設處理方式。文本自動處理換行。假如抵達容器邊界内容會轉到下一行 

pre     :　 換行和其他空白字元都将受到保護。這個值需要IE6+或者 !DOCTYPE 聲明為 
            standards-compliant mode 支援。如果 !DOCTYPE 聲明沒有指定為 standards-compliant mode，
            此屬性可以使用，但是不會發生作用。結果等同于 normal 。參閱 pre 對象
 
nowrap  :　 強制在同一行内顯示所有文本，直到文本結束或者遭遇 br 對象。

相容性： IE5.5+，  Firefox
           

另外解釋一下

word-wrap和word-break

word-wrap用來控制換行

兩種取值：

(1)normal

(2)break-word（此值用來強制換行，内容将在邊界内換行，中文沒有任何問題，英文語句也沒問題。但是對于長串的英文，就不起作用。） 

word-break用來控制斷詞

三種取值：

(1)normal

(2)break-all（是斷開單詞。在單詞到邊界時，下個字母自動到下一行。主要解決了長串英文的問題。）

(3)keep-all（是指Chinese, Japanese, and Korean不斷詞，一句話一行，可以用來排列古詩喲~）

另外可參照以下文章

相容多浏覽器，相容 div、p、td 的強制不換行及強制換行

關于overflow: hidden;的說明

即使通過css控制了td橫向字型隐藏截取，而縱向遇到<br>的情況還是會撐開單元格的高度，ie9好像支援這種效果，而不會撐開單元格的高度

<style type="text/css">
.x-grid-body {
	table-layout: fixed;
}
.x-grid-body td {
	overflow: hidden;
	border: 1px #dcdcdc dotted;
	border-width: 1px;
	word-break: keep-all;
	white-space: nowrap;
}
</style>

<table  cellspacing="0" cellpadding="0"  class = "x-grid-body"  style = "width:150px;">
	<tr>
		<td>
			1
		</td>
		
		<td style = "width:100px;height:20px;">	
			  11111111111111111111111111111111111111111111
			  <br>
			  2222222222222222222
			  <br>
			  33333333333333333333
			  <br>
			  33333333333333333333
			  <br>
		</td>
	</tr>
</table>
           

運作以上代碼，在ie和ff中橫向會隐藏顯示，而縱向隻有在ie9中才會隐藏

解決以上問題，隻需在td中加上div即可實作ie和ff都支援

<style type="text/css">
.x-grid-body {
	table-layout: fixed;
}
.x-grid-body td {
	overflow: hidden;
	border: 1px #dcdcdc dotted;
	border-width: 1px;
	word-break: keep-all;
	white-space: nowrap;
}
</style>

<table  cellspacing="0" cellpadding="0"  class = "x-grid-body" style = "width:150px;">
	<tr>
		<td>
			1
		</td>
		
		<td style = "width:100px;height:20px;">	
		<div style = "height:20px;">
			  11111111111111111111111111111111111111111111
			  <br>
			  2222222222222222222
			  <br>
			  33333333333333333333
			  <br>
			  33333333333333333333
			  <br>
	     </div>
		</td>
	</tr>
</table>