换行-white-space, word-wrap, word-break
2011-11-20 16:02
531 查看
参看:http://blog.csdn.net/liu2835993/archive/2009/12/10/4977555.aspx
经常在项目中遇到换行问题,属性word-break只有在ie6、ie7下可用,故忽略。
注意: 此文只谈怎么让元素不换行,直接隐藏(在实际项目中一般不会出现,用户体验太差)
------------------------------------------------------------------------------------
1. 块状元素中(以div示例)
如果需要单行显示,不换行,直接设置overflow:hidden, white-space:nowrap; width:xxx(指定宽度)
备注: 不需要指定高度。
2. 表格中
如果需要固定td的宽度,并且让td中的内容不换行,超出td宽度的内容自动隐藏,则需要做如下操作:
1. table设置table-layout:fixed
2. td设置nowrap; overflow:hidden
3. tbody中的td不能设置宽度,td的宽度由thead中的td或者th来设置(这个相当关键)
示例:
如图:
css代码:
.tableContainer{padding-bottom:100px;}
.tableContainer table{table-layout:fixed; border:solid 1px #ccf; width:800px; line-height:1.6em; vertical-align:middle;}
.tableContainer table thead th{background:#aaa; font-weight:bold; text-align:center; border:none; font-size:14px;}
.tableContainer table tbody td{overflow:hidden; padding:1px 6px; border:solid 1px #ccf; color:#000; text-align:right;}
------------------------------------------
html代码:
<div class="tableContainer mt30">
<table cellpadding="0" cellspacing="0">
<thead>
<tr>
<th width="20">序号</th>
<th width="50">姓名</th>
<th width="80">生日</th>
<th>邮箱</th>
</tr>
</thead>
<tbody>
<tr>
<td nowrap>11111111</td>
<td nowrap>这个全是中文全部是中文这个全是中文全部是中文这个全是中文全部是中文</td>
<td nowrap>this is all english This ! thisfk lakd laawwwwwwwlakdjfwwwwwwwww</td>
<td nowrap>wrap换行测试数据测试数据wwwwwwwwww<>wwwwmmmwwwmmm</td>
</tr>
<tr>
<td nowrap="nowrap">wrap换行测试数据测试数据wwwwwwwwww<>wwwwmmmwwwmmm</td>
<td nowrap="nowrap">wrap换行测试数据测试数据wwwwwwwwww<>看看中文看看中文</td>
<td nowrap>this is all english This ! thisfk lakd laawwwwwwwlakdjfwwwwwwwww</td>
<td nowrap>wrap换行测试数据测试数据wwwwwwwwww<>----------------</td>
</tr>
<tr>
<td nowrap>111111</td>
<td nowrap>这个全是中文全部是中文这个全是中文全部是中文这个全是中文全部是中文</td>
<td nowrap>this is all english This ! thisfk lakd laawwwwwwwlakdjfwwwwwwwww</td>
<td nowrap>wrap换行测试数据测试数据wwwwwwwwww<>wwwwmmmwwwmmm</td>
</tr>
<tr>
<td nowrap>wrap换行测试数据测试数据wwwwwwwwww<><<<<<<<<<</td>
<td nowrap>wrap换行测试数据测试数据wwwwwwwwww<><><><><><><></td>
<td nowrap>wrap换行测试数据测试数据wwwwwwwwww<>----------------</td>
<td nowrap>wrap换行测试数据测试数据wwwwwwwwww<>wwmmmmmmmmmwwmmmwwwmmm</td>
</tr>
</tbody>
</table>
</div>
经常在项目中遇到换行问题,属性word-break只有在ie6、ie7下可用,故忽略。
注意: 此文只谈怎么让元素不换行,直接隐藏(在实际项目中一般不会出现,用户体验太差)
------------------------------------------------------------------------------------
1. 块状元素中(以div示例)
如果需要单行显示,不换行,直接设置overflow:hidden, white-space:nowrap; width:xxx(指定宽度)
备注: 不需要指定高度。
2. 表格中
如果需要固定td的宽度,并且让td中的内容不换行,超出td宽度的内容自动隐藏,则需要做如下操作:
1. table设置table-layout:fixed
2. td设置nowrap; overflow:hidden
3. tbody中的td不能设置宽度,td的宽度由thead中的td或者th来设置(这个相当关键)
示例:
如图:
css代码:
.tableContainer{padding-bottom:100px;}
.tableContainer table{table-layout:fixed; border:solid 1px #ccf; width:800px; line-height:1.6em; vertical-align:middle;}
.tableContainer table thead th{background:#aaa; font-weight:bold; text-align:center; border:none; font-size:14px;}
.tableContainer table tbody td{overflow:hidden; padding:1px 6px; border:solid 1px #ccf; color:#000; text-align:right;}
------------------------------------------
html代码:
<div class="tableContainer mt30">
<table cellpadding="0" cellspacing="0">
<thead>
<tr>
<th width="20">序号</th>
<th width="50">姓名</th>
<th width="80">生日</th>
<th>邮箱</th>
</tr>
</thead>
<tbody>
<tr>
<td nowrap>11111111</td>
<td nowrap>这个全是中文全部是中文这个全是中文全部是中文这个全是中文全部是中文</td>
<td nowrap>this is all english This ! thisfk lakd laawwwwwwwlakdjfwwwwwwwww</td>
<td nowrap>wrap换行测试数据测试数据wwwwwwwwww<>wwwwmmmwwwmmm</td>
</tr>
<tr>
<td nowrap="nowrap">wrap换行测试数据测试数据wwwwwwwwww<>wwwwmmmwwwmmm</td>
<td nowrap="nowrap">wrap换行测试数据测试数据wwwwwwwwww<>看看中文看看中文</td>
<td nowrap>this is all english This ! thisfk lakd laawwwwwwwlakdjfwwwwwwwww</td>
<td nowrap>wrap换行测试数据测试数据wwwwwwwwww<>----------------</td>
</tr>
<tr>
<td nowrap>111111</td>
<td nowrap>这个全是中文全部是中文这个全是中文全部是中文这个全是中文全部是中文</td>
<td nowrap>this is all english This ! thisfk lakd laawwwwwwwlakdjfwwwwwwwww</td>
<td nowrap>wrap换行测试数据测试数据wwwwwwwwww<>wwwwmmmwwwmmm</td>
</tr>
<tr>
<td nowrap>wrap换行测试数据测试数据wwwwwwwwww<><<<<<<<<<</td>
<td nowrap>wrap换行测试数据测试数据wwwwwwwwww<><><><><><><></td>
<td nowrap>wrap换行测试数据测试数据wwwwwwwwww<>----------------</td>
<td nowrap>wrap换行测试数据测试数据wwwwwwwwww<>wwmmmmmmmmmwwmmmwwwmmm</td>
</tr>
</tbody>
</table>
</div>
相关文章推荐
- 文本换行word-wrap、word-break与white-space
- 文本换行word-wrap、word-break与white-space
- CSS 换行知多少: word-wrap && word-break && white-space && word-spacing
- css中强制换行word-break、word-wrap、white-space区别实例说明
- 浅谈 white-space, word-wrap, word-break,强制换行的区别
- 文字换行中word-wrap、white-space和word break的区别
- css中强制换行word-break、word-wrap、white-space区别实例说明
- CSS文本换行:white-space、word-break、word-wrap
- css换行(white-space、word-wrap、word-break)
- css中强制换行word-break、word-wrap、white-space区别实例说明
- 页面对json返回自动result:<pre style="word-wrap: break-word; white-space: pre-wrap;">{"flag":"true"}</pre>问题
- word-wrap、white-space和word break的区别
- word-wrap,word-break,white-space,text-overflow的区别和用法
- word-wrap、white-space和word break的区别
- css中文本换行属性word-wrap和white-space
- word-wrap,word-break,white-space,text-overflow的区别和用法
- word-break: break-all;、word-break: keep-all; 、word-wrap: break-word;和white-space:nowrap;都有什么作用
- word-wrap、white-space和word break的区别
- text-wrap、text-wrap、word-break、word-spacing、white-space等文字排版CSS总结
- word-wrap,word-break,white-space,text-overflow的用法