table 中应用text-overflow

来源：互联网发布：新疆网络监控处置中心编辑：程序博客网时间：2024/05/21 17:24

一、基本语法

语法： text-overflow : clip | ellipsis

参数：
　　 clip : 不显示省略标记（...），而是简单的裁切
　　
ellipsis : 当对象内文本溢出时显示省略标记（...）

　　说明：设置或检索是否使用一个省略标记（...）标示对象内文本的溢出。

　　示例：div { text-overflow : clip; }

text-overflow是一个比较非凡的样式，我们可以用它代替我们通常所用的标题截取函数，而且这样做对搜索引擎更加友好，如：标题文件有50个汉字，而我们的列表可能只有300px的宽度。假如用标题截取函数，则标题不是完整的，假如我们用CSS样式text-overflow:ellipsis，输出的标题是完整的，只是受容器大小的局限不显示出来罢了。

二、应用注意事项

1.text-overflow属性仅是注解，当文本溢出时是否显示省略标记。并不具备其它的样式属性定义。我们想要实现溢出时产生省略号的效果。还必须定义：强制文本在一行内显示（white-space:nowrap）及溢出内容为隐藏（overflow:hidden）。只有这样才能实现溢出文本显示省略号的效果。
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;

2.table中的cell 不支持text-overflow属性。要在cell中使用时，可以在cell中定义个div，设置div的text-overflow属性。

三、应用例子

代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html> <head>   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />   <title>table中应用text-overflow</title>   <style type="text/css">.ui-table {border-collapse: collapse;width:100%;}.ui-table th {border: 1px solid #ffffff;padding: 1px;text-align: center;}.ui-table td {border: 1px solid #ffffff;background-color: #eeeeee;padding: 3px;}</style>  </head>  <body>   <div style="width:420px;">    <table class="ui-table">     <tbody>     <tr>       <td>选择项</td>       <td>No号</td>       <td>员工号</td>       <td>姓名</td>       <td>部门</td>      </tr>      <tr>       <td> <input type="checkbox" name="list[0].flag" value="on" id="flag0" /><input type="hidden" name="list[0].userid" value="SX00001" id="userid" /></td>       <td>1</td>       <td>SX00001</td>       <td><a href="/HRMS2/pages/personManageInfo.jsp?userid=SX00001">员工A</a></td>       <td>       <div style="width:100px;overflow: hidden; text-overflow: ellipsis;  white-space: nowrap;">        动画联盟(此单元格内容比较长)       </div></td>      </tr>      <tr>       <td> <input type="checkbox" name="list[1].flag" value="on" id="flag1" /><input type="hidden" name="list[1].userid" value="DHL000000" id="userid" /></td>       <td>2</td>       <td>DHL000000</td>       <td><a href="/HRMS2/pages/personManageInfo.jsp?userid=DHL000000">管理员</a></td>       <td>动画联盟</td>      </tr>      <tr>       <td> <input type="checkbox" name="list[2].flag" value="on" id="flag2" /><input type="hidden" name="list[2].userid" value="DHL130003" id="userid" /></td>       <td>3</td>       <td>DHL130003</td>       <td><a href="/HRMS2/pages/personManageInfo.jsp?userid=DHL130003">张三</a></td>       <td>动画联盟</td>      </tr>      <tr>       <td> <input type="checkbox" name="list[3].flag" value="on" id="flag3" /><input type="hidden" name="list[3].userid" value="DHL130023" id="userid" /></td>       <td>4</td>       <td>DHL130023</td>       <td><a href="/HRMS2/pages/personManageInfo.jsp?userid=DHL130023">李四</a></td>       <td>动画联盟</td>      </tr>     </tbody>   </table>   </div>   </body></html>

0 0