换行-white-space, word-wrap, word-break

参看：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&lt;&gt;wwwwmmmwwwmmm</td>

                    </tr>

                    <tr>

                        <td nowrap="nowrap">wrap换行测试数据测试数据wwwwwwwwww&lt;&gt;wwwwmmmwwwmmm</td>

                        <td nowrap="nowrap">wrap换行测试数据测试数据wwwwwwwwww&lt;&gt;看看中文看看中文</td>

                        <td nowrap>this is all english This ! thisfk lakd laawwwwwwwlakdjfwwwwwwwww</td>

                        <td nowrap>wrap换行测试数据测试数据wwwwwwwwww&lt;&gt;----------------</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&lt;&gt;wwwwmmmwwwmmm</td>

                    </tr>

                    <tr>

                        <td nowrap>wrap换行测试数据测试数据wwwwwwwwww&lt;&gt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;</td>

                        <td nowrap>wrap换行测试数据测试数据wwwwwwwwww&lt;&gt;&lt;&gt;&lt;&gt;&lt;&gt;&lt;&gt;&lt;&gt;&lt;&gt;</td>

                        <td nowrap>wrap换行测试数据测试数据wwwwwwwwww&lt;&gt;----------------</td>

                        <td nowrap>wrap换行测试数据测试数据wwwwwwwwww&lt;&gt;wwmmmmmmmmmwwmmmwwwmmm</td>

                    </tr>

                    </tbody>

                </table>

            </div>