table 里的td内容过长，小弟我想用。显示

table 里的td内容过长，我想用。。。显示
table 里的td内容过长，我想用.....显示，重点：我想鼠标点.....上面，然后上面出现一个图层来显示整个内容，各位大哥大姐，求助啊！！！！！！！！！！！！
[解决办法]
我倒是有一个思路，用二级弹出菜单的方法


&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
&lt;head&gt;
&lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;
&lt;title&gt;无标题文档&lt;/title&gt;
&lt;style type="text/css"&gt;
table {
border: #CCC 1px solid;
}
td,th {
width: 120px;
border: 1px solid #999;
}
td:hover ul {
display: block;

}
ul {
display: none;
border: 1px solid #999;
list-style: none;
margin: 0;
padding: 0;
position: absolute;
width: 120px;
background: #CCC;
}

&lt;/style&gt;
&lt;/head&gt;

&lt;body&gt;
&lt;table&gt;
  &lt;tr&gt;
    &lt;th&gt;标题一&lt;/th&gt;
    &lt;th&gt;标题二&lt;/th&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
    &lt;td&gt;内容一内容……
      &lt;ul&gt;
        &lt;li&gt;隐藏内容一&lt;/li&gt;
      &lt;/ul&gt;
    &lt;/td&gt;
    &lt;td&gt;内容二内……&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
    &lt;td&gt;内容三&lt;/td&gt;
    &lt;td&gt;内容四&lt;/td&gt;
  &lt;/tr&gt;
&lt;/table&gt;
&lt;/body&gt;
&lt;/html&gt;

[解决办法]

引用:

引用:我倒是有一个思路，用二级弹出菜单的方法

XML/HTML code?

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253

<!DOCTYPE html PUBL……

呃，懂你意思了，你是想让它自动判断内容是否过长然后自动隐藏嘛，这个我就不晓得了，不过估计得用到javascript……
[解决办法]
试一试css属性
text-overflow:ellipsis;
[解决办法]
最好写段js搞定她~~~
[解决办法]
display:block;/*定义为块级*/
overflow:hidden; /*超出的部分隐藏起来。*/
white-space:nowrap;/*不显示的地方用省略号...代替*/
text-overflow:ellipsis;/* 支持 IE */
-o-text-overflow: ellipsis; /* 支持 Opera *
这只是让多余的内容再一定的宽度范围内显示省略号，但是连续的英文字母跟数字不行。
再你说的第二个问题就是鼠标放上去显示完整的内容这个用title吧。如果还有不懂的可以给我发私信我做个 demo 给你

[解决办法]
如果能帮助你解决问题记得结贴谢谢赚点积分真不容易啊。
------解决方案--------------------

撸主，解决了么？
求分享代码啊
[解决办法]

&lt;style type="text/css"&gt;
 #test{
  display:block;/*内联对象需加*/  
    width:100px;  
    word-break:keep-all;/* 不换行 */  
    white-space:nowrap;/* 不换行 */  
    overflow:hidden;/* 内容超出宽度时隐藏超出部分的内容 */  
    text-overflow:ellipsis;
 }
&lt;/style&gt;

这种能实现隐藏，并且后面有...显示，但是问题是怎么把鼠标移到上面去在鼠标右下方显示那些内容呢
[解决办法]

&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd"&gt;
&lt;HTML xmlns="http://www.w3.org/1999/xhtml"&gt;&lt;HEAD&gt;
&lt;TITLE&gt;&lt;/TITLE&gt;
&lt;META http-equiv=Content-Type content="text/html; charset=gbk"&gt;
&lt;/HEAD&gt;
&lt;style type="text/css"&gt;
&lt;!--
table { table-layout: fixed; } 
td {overflow:hidden; white-space:nowrap; text-overflow:ellipsis;}
--&gt;
&lt;/style&gt;
&lt;/head&gt;

&lt;body&gt;
&lt;table width="300" border="1" cellpadding="0" cellspacing="0" bordercolorlight="#CCCCCC" bordercolordark="#FFFFFF"
  &lt;tr&gt;
    &lt;td width="100" height="20"&gt;
&lt;a title = "我不换行我不换行我不换行我不换行我不换行我不换行我不换行我不换行我不换行我不换行我不换行我不换行我不换行我不换行我不换行"&gt;
&lt;NOBR&gt;我不换行我不换行我不换行我不换行我不换行我不换行我不换行我不换行我不换行我不换行我不换行我不换行我不换行我不换行我不换行
&lt;/NOBR&gt;
&lt;/a&gt;
&lt;/td&gt;
    &lt;td width="100" height="20"&gt;
&lt;a title = "我不换行我不换行我不换行我不换行我不换行我不换行我不换行我不换行我不换行我不换行我不换行我不换行我不换行我不换行我不换行"&gt;
&lt;NOBR&gt;我不换行我不换行我不换行我不换行我不换行我不换行我不换行我不换行我不换行我不换行我不换行我不换行我不换行我不换行我不换行
&lt;/NOBR&gt;
&lt;/a&gt;
&lt;/td&gt;
    &lt;td width="100"&gt;&nbsp;&lt;/td&gt;
  &lt;/tr&gt;
    &lt;tr&gt;
    &lt;td width="100" height="20"&gt;&lt;NOBR&gt;我不换行我不换行我不换行我不换行我不换行我不换行我不换行我不换行我不换行我不换行&lt;/NOBR&gt;&lt;/td&gt;
    &lt;td width="100"&gt;&lt;NOBR&gt;我不换行我不换行我不换行我不换行我不换行我不换行我不换行我不换行我不换行我不换行&lt;/NOBR&gt;&lt;/td&gt;
    &lt;td width="100"&gt;&nbsp;&lt;/td&gt;
  &lt;/tr&gt;
&lt;/table&gt;
&lt;/body&gt;
&lt;/html&gt;

现在可以实现鼠标移上去在右下方显示了，例子为第一个和第二个单元格，希望对你和后面一样问题的人又帮助。
[解决办法]
关于......现在可以通过CSS来实现了，text-overflow:ellipsis;
另外显示整个内容可以使用 title 属性。比如：


&lt;a href="#" target="_blank" title="这里显示完整的内容"&gt;内容&lt;/a&gt;

[解决办法]
这个很简单的，我给个思路吧，不过我是用js实现，其实用个问号表达式就可以了，当你没有td里面的值需要显示多少个字符，然后多的字符就用...表示，打比方你需要每个td里面过了6个字符然后其它的用...表示,(value.length>6?value.subString(0,6):value)，然后你鼠标移上去用显示一个图层，然后图层上显示你需要的东西，你可以把图层里面需要的东西，用一个隐藏的图层标签保存，要显示的时候在一个鼠标移入事件中直接显示这个图层就可以了，如果是每个td都需要的话，那么你将在每个td中用一个span标签里面存放各个td的实际值都将隐藏起来，当你鼠标移入的时候事件激发之后你直接获取对应td里面的隐藏span标签里面值赋给要显示的图层里面，然后将图层显示出来就可以完成你要的功能了，你试试看，这样应该能解决你说的情况，如果有跟好的方法可以贴出来。
[解决办法]
问号表达式掉了几个...((value.length>6?(value.subString(0,6)+"..."):value))
[解决办法]

引用:

问号表达式掉了几个...((value.length>6?(value.subString(0,6)+"..."):value))

这叫三元表达式好么
[解决办法]

这叫三元表达式好么

叫法不一样而已，邓小平说过黑猫白猫能抓住老鼠就是好猫，你说呢

[解决办法]
table强制不换行：
table{table-layout:fixed;} td{overflow: hidden; text-overflow: ellipsis;word-break: keep-all;white-space:nowrap;}
这样，虽然显示出了省略号，但是td中省略掉的内容是实际存在的，你可以用一些jQuery tip插件来显示出来，也可以自己写js
[解决办法]
帅哥，咋就没有看到给点分呢，意思下也行啊

table 里的td内容过长小弟我想用。显

热点推荐