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 測試效果
使用的是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
留言
張貼留言