ASP.NET_GridVIew_欄位內容太長跑版問題解決方式

 

通常一個頁面上要呈現的表格資料

可能會用table、GridView來作呈現

只是畫面難免容易因為來自使用者無固定長度輸入的內容而有非預期的外觀跑版問題

此時解法可以透過

於PreRender事件動態註冊

以asp.net   gridview為例

1 2 3 4

protected void gvw_PreRender(object sender, EventArgs e) { gvwData.Attributes.Add("style", "word-break:break-word;word-wrap:normal"); }

或者也可以寫死在aspx中的gridview style

1 2 3 4 5 6

<asp:GridView ID="gvwData" runat="server" AutoGenerateColumns="False" OnPreRender="gvw_PreRender" style="word-break:break-word; word-wrap:normal;" Width="100%" EmptyDataText="無資料" ShowHeaderWhenEmpty="True"> </asp:GridView>

這裡

word-break : 設定瀏覽器要在什麼樣的情況下讓字串斷行

常見的設定主要分為兩種

分別是

(1)換行的時候要保持單字完整

(2)無論單字是否完整都直接換行

https://www.w3schools.com/cssref/css3_pr_word-break.asp

Value	Description
normal	Default value. Uses default line break rules
break-all	To prevent overflow, word may be broken at any character
keep-all	Word breaks should not be used for Chinese/Japanese/Korean (CJK) text. Non-CJK text behavior is the same as value "normal"
break-word	To prevent overflow, word may be broken at arbitrary points
initial	Sets this property to its default value. Read about initial
inherit	Inherits this property from its parent element. Read about inherit

實際demo 測試效果

https://developer.mozilla.org/zh-CN/docs/Web/CSS/word-break

使用的是break-word的選項

主要是為了避免英文單詞因強制換行被截斷的問題

如果是中文則到邊界處的漢字換行,如果是英文整個詞換行

word-wrap : 單字折行設定

讓很長的單字可以切換到下一行，大部的瀏覽器預設值都是讓很長的單字保留完整，直接在跳倒下一行或是讓單字超出 DIV 區塊的範圍

Value	Description
normal	Break words only at allowed break points
break-word	Allows unbreakable words to be broken
initial	Sets this property to its default value. Read about initial
inherit	Inherits this property from its parent element. Read about inherit

normal：依字(word) 來做跳行

Ref:

https://blog.xuite.net/tolarku/blog/500048922

http://shaurong.blogspot.com/2017/07/css-word-break-break-word-td.html

https://aspdotnetcodehelp.wordpress.com/2015/04/28/how-to-wrap-text-in-gridview-bound-columns-in-asp-net/

https://www.devcurry.com/2009/05/how-to-prevent-word-wrap-in-aspnet.html

https://www.itread01.com/content/1546849661.html