表格单元格内容超出时显示省略号效果(实现代码)
|
<th class="sex">性别</th> <th class="addr">地址</th> </tr> </thead> <tbody> <tr> <td>李四</td> <td>13</td> <td>男</td> <td>山东</td> </tr> <tr> <td>李四</td> <td>13</td> <td>男</td> <td>山东</td> </tr> <tr> <td>李四</td> <td>13</td> <td>男</td> <td>山东</td> </tr> </tbody> </table> </body> </html> 显示效果如下所示：
很容易可以看出，姓名、年龄、性别以及地址等列的长度分别是10%、20%、30%、40%。 如果将第一个的姓名内容增多，效果简直不忍直视（＞﹏＜）！
不忍直视（＞﹏＜）！！
如何把单行内容超出部分显示为省略号呢？只需要将单元格设置如下属性：
XML/HTML Code复制内容到剪贴板
white-space: nowrap;/*控制单行显示*/ overflow: hidden;/*超出隐藏*/ text-overflow: ellipsis;/*隐藏的字符用省略号表示*/ 话不多说，上代码！
XML/HTML Code复制内容到剪贴板
<!doctype html> <html lang="en"> <head> （编辑：焦作站长网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
