查看完整版本: 自动隐藏超长文本行的代码(转帖)

keke 2007-12-12 16:40

自动隐藏超长文本行的代码(转帖)

[color=blue][b]“鼠标指上即显示完整文字”版本[/b][/color]
[code]<script>
function onm(x){
  x.style.border="1px solid #000";
  x.style.overflow="visible";
  x.style.background="FFFFE6";
}
function outm(x){
  x.style.border="none";
  x.style.overflow="hidden";
  x.style.background="none";
}
</script>
<style>
#a{
position:relative;
width:200px;
}
#a_1{
width:100px;
overflow: hidden;
white-space :nowrap;
text-overflow:ellipsis;
left:10px;
position:absolute;
z-index:2;
}
#a_2{
color:red;
left:110px;
position:absolute;
z-index:1;
}
</style>
<div id="a">
<span id="a_1" onmouseover="onm(this);" onmouseout="outm(this);">11111111111-90------9078888888888111</span>
<span id="a_2">aaa</span>
</div>[/code]出处:[url=http://www.0791.net/html/2006-04/1212.htm]http://www.0791.net/html/2006-04/1212.htm[/url]

bufegar 2007-12-12 16:42

DIV框定版本

[code]<DIV STYLE="width: 120px; overflow: hidden; text-overflow:ellipsis">
<nobr>就是比如有一行文字，很长，表格内一行显示不下.</nobr>
</DIV>[/code]

bufegar 2007-12-12 16:43

“让文字自动适应Table宽度”版本

以下的例子是用样式实现，文字自动适应Table的宽度，并且超出的宽度的文字自动隐藏。IE下面还可以自动出现...的省略符号.[code].ctl{ table-layout:fixed } .ctl td{text-overflow:ellipsis;overflow:hidden;white-space: nowrap;padding:2px}[/code]关键样式:
table-layout:fixed 固定布局的算法,则表格被呈递的默认宽度为 100% (For IE,Mozilla)
text-overflow:ellipsis 当对象内文本溢出时显示省略标记(...) (For IE)
overflow:hidden 不显示超过对象尺寸的内容 (For IE,Mozilla)
white-space: nowrap 强制在同一行内显示所有文本，直到文本结束或者遭遇 br 对象 (For IE,Mozilla)

演示：[code]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>

<style>
.ctl{
   table-layout:fixed
}
  .ctl td{text-overflow:ellipsis;overflow:hidden;white-space: nowrap;padding:2px}
</style>
</HEAD>

<BODY>
<table cellSpacing="0" cellpadding="1" width="100%" class="ctl" border=1>
  <colgroup>
   <col>
   <col width="60">
  </colgroup>
  <tBody>
   <tr>
        <td>标题扩大副教授的士大夫看见似的看来法艰苦但是第十六棵飞机立刻标题扩大副教授的士大夫看见似的看来法艰苦但是第十六棵飞机立刻</td>
        <td>(1/1)</td>
   </tr>
    <tr>
        <td>标题扩大副教授的士大夫看见似的看来法艰苦但是第十六棵飞机立刻标题扩大副教授的士大夫看见似的看来法艰苦但是第十六棵飞机立刻</td>
        <td>(1/1)</td>
   </tr>
   <tr>
        <td>标题扩大副教授的士大夫看见似的看来法艰苦但是第十六棵飞机立刻标题扩大副教授的士大夫看见似的看来法艰苦但是第十六棵飞机立刻</td>
        <td>(1/1)</td>
   </tr>
   <tr>
        <td>标题扩大副教授的士大夫看见似的看来法艰苦但是第十六棵飞机立刻标题扩大副教授的士大夫看见似的看来法艰苦但是第十六棵飞机立刻</td>
        <td>(1/1)</td>
   </tr>
</tBody>
</table>
</BODY>
</HTML>[/code]
页: [1]
查看完整版本: 自动隐藏超长文本行的代码(转帖)