2017年7月8日 星期六

[研究] 用 CSS 的 word-break: break-word; 強迫換行、斷行

[研究] 用 CSS 的 word-break: break-word; 強迫換行、斷行

2017-07-08

對 HTML 而言，那一串1是當成1個數字，不會被從中間換行。
<table border=1>
<tr>
<td>abc</td>
<td wrap>111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111</td>
</tr>
<tr>
<td>def</td>
<td>ggggggggggg</td>
</tr>
</table>



********************************************************************************

用 CSS 的 word-break: break-word; 可強迫 td 中的文字在字中換行
<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style type="text/css">
        .tdWrap {
            word-break: break-word;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
        <table border="1">
            <tr>
                <td>abc</td>
                <td class="tdWrap">111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111</td>
            </tr>
            <tr>
                <td>def</td>
                <td>ggggggggggg</td>
            </tr>
        </table>
    </form>
</body>
</html>


**********

如果是 GridView 中使用，可用 ItemStyle-CssClass 指定 CSS，用 ItemStyle-Width 指定寬度 ( 寬度一定要指定，不能只有 CSS )

<head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style type="text/css">
        .tdWrap {
            word-break: break-word;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
        <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" DataKeyNames="no">
            <Columns>
                <asp:BoundField DataField="no" HeaderText="no" InsertVisible="False" ReadOnly="True" SortExpression="no" />
                <asp:BoundField DataField="F1" HeaderText="F1" SortExpression="F1" />
                <asp:BoundField DataField="F2" HeaderText="F2" SortExpression="F2" ItemStyle-CssClass="tdWrap" ItemStyle-Width="90px" />
            </Columns>
        </asp:GridView>
    </form>
</body>

protected void Page_Load(object sender, EventArgs e)
        {
            DataTable table = new DataTable();
            table.Columns.Add("no", typeof(string));
            table.Columns.Add("F1", typeof(string));
            table.Columns.Add("F2", typeof(string));

            // Here we add five DataRows.
            table.Rows.Add("123", "456", "111111111111111111111111111111111111");
            table.Rows.Add("123", "456", "111111111111111111111111111111111111");
            table.Rows.Add("123", "456", "111111111111111111111111111111111111");
            GridView1.DataSource = table;
            GridView1.DataBind();
        }
    }
(完)

參考
https://forums.asp.net/t/2124729.aspx?Browser+s+width+is+max+How+to+auto+wrap+the+long+1+in+td+of+table


張貼者： 於
標籤： ,

沒有留言:

張貼留言

訂閱： 張貼留言 (Atom)