table 中应用text-overflow

最新推荐文章于 2022-11-07 22:24:24 发布

东语~

最新推荐文章于 2022-11-07 22:24:24 发布

阅读量2.2k

点赞数

分类专栏： CSS 文章标签： table中 text-overflow

本文为博主原创文章，未经博主允许不得转载。

本文链接：https://blog.csdn.net/psp0001060/article/details/49705167

版权

CSS 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

一、基本语法

语法： 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
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
table 中应用text-overflow

一、基本语法语法： text-overflow : clip | ellipsis 参数：　　 clip : 不显示省略标记（...），而是简单的裁切　　 ellipsis : 当对象内文本溢出时显示省略标记（...）　　说明：设置或检索是否使用一个省略标记（...）标示对象内文本的溢出。　　示例：div { text-overflow :
复制链接

扫一扫

专栏目录