浮雲雅築: 斷行

顯示具有斷行標籤的文章。顯示所有文章

2020年4月20日星期一

[研究][ASP.NET][WebForm] GridView 欄位內容文字中強迫自動換行、斷行

[研究][ASP.NET][WebForm] GridView 欄位內容文字中強迫自動換行、斷行

2020-04-20
2022-05-31更新

protected void Page_Load(object sender, EventArgs e)

{
    //正常換行
    //GridView1.Attributes.Add("style", "word-break:keep-all;word-wrap:normal");

    //強迫字中自動換行
    //GridView1.Attributes.Add("style", "word-break:break-all;word-wrap:break-word");
}

強迫字中換行，但有最低寬度限制

<td style="word-break: break-all; min-width: 45px;">12345678901234567890123456789
1234567890123456789012345678900123456789012345678901234567890</td>

//ListView 的強迫字中自動換行無效，要直接加在 ItemTemplate 中各控制項中
ListView1.Attributes.Add("style", "word-break:break-all;word-wrap:break-word");

(完)

相關文章

[研究][ASP.NET][WebForm] GridView 欄位內容文字自動換行、斷行
https://shaurong.blogspot.com/2020/04/aspnetwebform-gridview.html

[研究] CSS li 不自動換行、斷行
https://shaurong.blogspot.com/2020/04/css-li.html

[研究][ASP.NET][WebForm] GridView 欄位標題列文字自動換行、斷行
https://shaurong.blogspot.com/2018/11/aspnet-webform-gridview.html

[研究] 用 CSS 的 word-break: break-word; 強迫自動換行、斷行
https://shaurong.blogspot.com/2017/07/css-word-break-break-word-td.html

[研究] CSS li 不自動換行、斷行

[研究] CSS li 不自動換行、斷行

2019-04-18

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css">
/* li 不換行，寬度根據內容自適應，通過 float 實現 */
.ul_one {list-style: none;margin: 0px;padding: 0px;}
.ul_one li {float: left;background-color: #ccd;margin: 0px 20px 10px 0px;}

/* li 不換行，寬度固定 */
.ul_two {list-style: none;margin: 0px;padding: 0px;}
.ul_two li {float: left;width: 100px;margin: 0px 20px 10px 0px;background-color: #ccd;overflow: hidden; line-height:1.6em;}

/* li 不換行，寬度根據內容自適應，通過 display:inline 實現 */
.ul_three {list-style: none;margin: 0px;padding: 0px;}
.ul_three li {display:inline;background-color: #ccd;margin: 0px 20px 10px 0px;}

.clear {clear: both;}
</style>
</head>
<body>
<ul class="ul_one">
<li>1ssssssssssssssssssssssss</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>寬度根據內容自適應1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
</ul>
<div class="clear"></div>
<hr />
<ul class="ul_two">
<li>1ssssssssssssssssssssssss</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1寬度根據內容自適應</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
</ul>
<div class="clear"></div>
<hr />
<ul class="ul_three">
<li>1ssssssssssssssssssssssss</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1寬度根據內容自適應</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
</ul>
</body>
</html>

(完)

2018年11月1日星期四

[研究][ASP.NET][WebForm] GridView 欄位標題列文字換行、斷行

[研究][ASP.NET][WebForm] GridView 欄位標題列文字換行、斷行

2018-11-01

開發工具：Visual Studio 2017 v15.8.8 + .NET Framework 4.7.2

<asp:BoundField DataField="MyAddr" HeaderText="我是<br />(標題)" SortExpression="MyAddr" HtmlEncode="False" />

(完)

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)

2020年4月20日 星期一