今天是:
设百科问答网为首页|收藏百科问答网|网站地图
百科问答网 - 帮您解决问题,分享成功经验
首页(百科问答网)  » 电脑/数码/通讯/互联网 » 编程/开发  » 怎么让网页内容自动转行?

怎么让网页内容自动转行?


<asp:DataList ID="DataList2" runat="server" DataSourceID="SqlDataSource1"
            Height="799px" Width="619px">
            <ItemTemplate>
                <table style="width: 95%;height: 404px;">
                    <tr>
                        <td class="style1">
                            <asp:Label ID="Label1" runat="server" Text='<%# Eval("subject") %>' />
                <br /> </td>                       
                    </tr>                   
                    <tr>
                        <td class="style2">
                            <pre><%# Eval("message") %></pre>  //当message的内容很长且输入者输入时没有用过Enter键.显示的宽度会很大,怎么让它自动转行?
                        </td>
                    </tr>
                </table>


答案或建议:


可以用CSS样式控制

对于div,p等块级元素

正常文字的换行(亚洲文字和非亚洲文字)元素拥有默认的white-space:normal,当定义的宽度之后自动换行

html
<div id="wrap">正常文字的换行(亚洲文字和非亚洲文字)元素拥有默认的white-space:normal,当定义</div>

css
#wrap{white-space:normal; width:200px; }

1.(IE浏览器)连续的英文字符和阿拉伯数字,使用word-wrap : break-word ;或者word-break:break-all;实现强制断行
#wrap{word-break:break-all; width:200px;}
或者
#wrap{word-wrap:break-word; width:200px;}
<div id="wrap">abcdefghijklmnabcdefghijklmnabcdefghijklmn111111111</div>
效果:可以实现换行

2.(Firefox浏览器)连续的英文字符和阿拉伯数字的断行,Firefox的所有版本的没有解决这个问题,我们只有让超出边界的字符隐藏或者,给容器添加滚动条
#wrap{word-break:break-all; width:200px; overflow:auto;}
<div id="wrap">abcdefghijklmnabcdefghijklmnabcdefghijklmn111111111</div>
效果:容器正常,内容隐藏

对于table

1. (IE浏览器)使用 table-layout:fixed;强制table的宽度,多余内容隐藏
<table style="table-layout:fixed" width="200">
<tr>
<td>abcdefghigklmnopqrstuvwxyz1234567890ssssssssssssss
</td>
</tr>
</table>
效果:隐藏多余内容

2.(IE浏览器)使用 table-layout:fixed;强制table的宽度,内层td,th采用word-break : break-all;或者word-wrap : break-word ;换行
<table width="200" style="table-layout:fixed;">
<tr>
<td width="25%" style="word-break : break-all; ">abcdefghigklmnopqrstuvwxyz 1234567890
</td>
<td style="word-wrap : break-word ;">abcdefghigklmnopqrstuvwxyz 1234567890
</td>
</tr>
</table>
效果:可以换行

3. (IE浏览器)在td,th中嵌套div,p等采用上面提到的div,p的换行方法

4.(Firefox浏览器)使用 table-layout:fixed;强制table的宽度,内层td,th采用word-break : break-all;或者word-wrap : break-word ;换行,使用overflow:hidden;隐藏超出内容,这里overflow:auto;无法起作用
<table style="table-layout:fixed" width="200">
<tr>
<td width="25%"  style="word-break : break-all; overflow:hidden; ">abcdefghigklmnopqrstuvwxyz1234567890</td>
<td width="75%" style="word-wrap : break-word; overflow:hidden; ">abcdefghigklmnopqrstuvwxyz1234567890</td>
</tr>
</table>


文章出自:http://www.baikewenda.com/h/1103/a37381.html

推荐内容

敬请注意:百科问答网内容来源于网络或民间经验收集,仅供参考。其中有关健康疾病方面的内容请务必咨询专业医生或及时到医院治疗。
关于我们 - 广告服务 - 联系我们
百科问答网 Copyright ©2005 - 2011 www.baikewenda.com,All Rights Reserved
辽ICP备10007180号