表格单元格内容超出时显示省略号效果(实现代码)
|
在前端开发中，经常会遇到需要限制单元格宽度并且内容超出部分显示省略号的的情况。下面就简单的介绍下如何达到这种效果。 准备知识 1. 控制文本不换行 white-space: nowrap; 2. 超出长度时，出现省略号 overflow:hidden; text-overflow:ellipsis 3. 修改表格布局算法 table-layout:fixed;table-layout的默认值为automatic，意思是列宽度由单元格内容设定。而fixed意思是列宽由表格宽度和列宽度设定。 也就是说当你给表格设定列宽时，实际情况是不起作用的，当单元格内容过多时，依然会把宽度撑开。如果需要让表格的列宽显示方式由自己给单元格定义的列宽决定，就必须使用fixed这个值。 注意：1、表格必须设置宽度 2、如果只设置表格宽度，而不设置列宽度的话，列的宽度会平均分配。 代码演示 如下代码所示，表格中安排了姓名、年龄、性别以及地址四列，这几个列的长度分别为10%、20%、30%、40%。
XML/HTML Code复制内容到剪贴板
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>表格演示</title> <style type="text/css"> table{ width: 100%; table-layout: fixed; } .name{ width: 10%; } .age{ width: 20%; } .sex{ width: 30%; } .addr{ width: 40%; }
</style> </head> <body> <table border="1" cellspacing="0" cellpadding="0"> <thead> <tr> <th class="name">姓名</th> <th class="age">年龄</th> （编辑：焦作站长网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |