首页 | 下载中心 | 图片中心 | 
您现在的位置: 海华网 >> 编程日志 >> 综合编程 >> 正文 用户登录 新用户注册
HTML表格内溢出文字自动隐藏           
HTML表格内溢出文字自动隐藏
作者:付晓波  文章来源:本站原创  点击数:  更新时间:2015-9-13
    

方法1:灵活定义,但对于英文字母、数字混合时,会换行:

<table style="table-layout:fixed;">这个对table标签定义,必须。
<td height="28" width="214" style="text-overflow:ellipsis;word-break: keep-all;overflow:hidden;">这里,宽度必须定义。当word-break: keep-all;被省略、且单元格高度被定义时,也会被隐藏,但不会出现省略符号。
完全代码:
<table border="1" style="border-collapse: collapse" bordercolor="#000000" id="table1" style="table-layout:fixed;">
  <tr>
   <td height="50" width="214" style="text-overflow:ellipsis;/*word-break: keep-all;*/overflow:hidden;line-height: 150%;">
   <a title="海华科技海华科技海华科技海华科技海华科技海华科技海华科技" href="haihua.net">海华科技海华科技海华科技海华科技海华科技海华科技海华科技</a></td>
   <td height="28" width="215" style="text-overflow:ellipsis;word-break: keep-all;overflow:hidden;">海华科技海华科技海华科技海华科技海华科技海华科技海华科技</td>
  </tr>
 </table>
效果:

方法2:灵活定义,并使用<span>或<label>嵌入表格内。这里必须要在style内定义固定宽度(100%即可),且省略高度。省略高度,文字就能自动垂直居中(依据表格的定义)。
 <table border="1" style="border-collapse: collapse" bordercolor="#000000" id="table1" style="table-layout:fixed;" height="86">
  <tr>
   <td height="86" width="214"       style="height:86px;width:214px;text-overflow:ellipsis;word-break:keep-all;white-space:nowrap;overflow:hidden;line-height: 150%;">海华科技2015年9月13日</a></td>
   <td height="86" width="215"><span  style="width:100%;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;" title="海华科技2015年9月13日开发">海华科技2015年9月13日开发autoHide海华科技</span></td>
   <td height="86" width="215"><label style="width:100%;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;" title="海华科技2015年9月13日开发">海华科技2015年9月13日开发autoHide海华科技</label></td>
   <td height="86" width="215"><label style="width:100%;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;" title="海华科技2015年9月13日开发">asjdf 海华科技 akjsdwie as asdf 海华科技 aksk 海华科技</label></td>
  </tr>
 </table>
这应该是最理想的效果。

方法3:全局CSS定义:

这个方法会将HTML页中所有的单元表格都固定成一行自动省略的模式,那么对于内容类的文字就弄错了。

<style type=text/css>
td{
text-overflow:ellipsis; /*省略时会出现省略号*/
/*text-overflow:clip; */  /*直接切掉,无省略符*/
/*word-break:keep-all;*/  /*在span或label里无用*/
white-space:nowrap;
overflow:hidden;
}
table{
table-layout:fixed;   /*这个必须*/
}
</style>

文章录入:付晓波    责任编辑:付晓波 
  • 上一篇文章: 域名查询代码公布

  • 下一篇文章: STYLE CSS 详解大全
  • 【字体: 】【发表评论】【加入收藏】【告诉好友】【打印此文】【关闭窗口
    专 题 栏 目
    最 新 热 门
    最 新 推 荐
    相 关 文 章
    没有相关文章
        网友评论:(只显示最新10条。评论内容只代表网友观点,与本站立场无关!)