实现文字的自动隐藏,控制文字长度-飞搜信息网

实现文字的自动隐藏,控制文字长度

时间:2015/12/1 10:44:00来源:互联网作者:flyso 点击: 851 次

关键样式:
table-layout:fixed 固定布局的算法,则表格被呈递的默认宽度为 100% (For IE,Mozilla)
text-overflow:ellipsis 当对象内文本溢出时显示省略标记(...) (For IE)
overflow:hidden 不显示超过对象尺寸的内容 (For IE,Mozilla)
white-space: nowrap 强制在同一行内显示所有文本，直到文本结束或者遭遇 br 对象 (For IE,Mozilla)

代码：
<!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=gb2312">
< title>www.flyso.cn</title>
< /head>
< body>
< table width="100%"  border="1" cellspacing="2" cellpadding="2" style="table-layout:fixed">
  <tr>
    <td width="10%">一</td>
    <td><div STYLE="width:60%;overflow:hidden;text-overflow:ellipsis"> <nobr> www.flyso.cnwww.flyso.cnwww.flyso.cnwww.flyso.cnwww.flyso.cnwww.flyso.cnwww.flyso.cnwww.flyso.cnwww.flyso.cnwww.flyso.cnwww.flyso.cnwww.flyso.cnwww.flyso.cnwww.flyso.cnwww.flyso.cnwww.flyso.cnwww.flyso.cnwww.flyso.cnwww.flyso.cnwww.flyso.cnwww.flyso.cnwww.flyso.cnwww.flyso.cn </nobr></div></td>
    <td width="30%"> </td>
  </tr>
    <tr>
    <td>二</td>
    <td><div STYLE="width:100%; overflow:hidden;text-overflow:ellipsis"> <nobr>新网之家新网之家新网之家新网之家新网之家新网之家新网之家新网之家新网之家新网之家新网之家新网之家新网之家新网之家新网之家新网之家</nobr></div></td>
    <td> </td>
  </tr>
  <tr>
    <td>三</td>
    <td><div STYLE="width:100%; overflow:hidden;text-overflow:clip"> <nobr>新网之家新网之家新网之家新网之家新网之家新网之家新网之家新网之家新网之家新网之家新网之家新网之家新网之家新网之家新网之家新网之家</nobr></div></td>
    <td> </td>
  </tr>
  <tr>
    <td>四</td>
    <td><div STYLE="text-overflow:ellipsis;overflow:hidden;white-space: nowrap;padding:2px"> 新网之家新网之家新网之家新网之家新网之家新网之家新网之家新网之家新网之家新网之家新网之家新网之家新网之家新网之家新网之家新网之家</div></td>
    <td> </td>
  </tr>
< /table>
< /body>
< /html>