網頁製作時,偶爾會遇到文字不換行的狀況,對設計美美的網頁來說可是一大衝擊!!!!
彙整網路上蒐集到的資訊做個筆記
FrieFox部分還沒找到比較便利的方式,還是需要一些家庭手工
——————————————————————————-
{CSS設定}
<style type="text/css">
/*自動換行,IE,Chrome通用,FireFox連續英文不換行(遇空格換一行)*/
.AutoNewline_break{word-wrap:break-word; word-break:break-all; }
.AutoNewline_normal{word-wrap:break-word; word-break:normal; }
/*強制不換行,IE,FireFox,Chrome通用*/
.NoNewline{white-space:nowrap}
/*標籤繼承*/
div { background:red; word-wrap: break-word; word-break:break-all; }
</style>
——————————————————————————-
{HTML設定}
<table width="100″ border="1″ style="width:100;">
<tr><td>
<div>
自動換行自動換行自動換行自動換行自動換行自動換行自動換行自動換行自動換行kkkInternationalInternationalInternationalInternational
</div>
</td></tr>
</table>
—或者—————
<table width="200″ border="0″ cellspacing="0″ cellpadding="0″>
<tr>
<td class="AutoNewline_normal">
<div style="width:100%; word-wrap: break-word; word-break: normal;">
1111111111111 2222222222 3333333333 44444 555555555555555555
</div>
</td>
</tr>
</table>
——————————————————————————-
{ASP.NET – GridView}
##直接對全部設定
GridView1.Attributes.Add(“style", “word-break:keep-all;word-wrap:normal"); //正常換行
GridView1.Attributes.Add(“style", “word-break:break-all;word-wrap:break-word"); //自動換行
##針對特定項目,在RowDataBound設定
e.Row.Cells[2].Style.Add(“word-break", “break-all");