如何让显示不下的内容自动显示省略号而不是出现滚动条

luqing414 2014-02-25 02:43:53

我的table中有3列，第一列占10%，第二列占80%，第三列占10%，80%的内容可能很长，我想让80%那一部分，如果显示不下，则出现省略号，并且我希望80%那一列最多出现2行（如果内容少就只一行），应该怎么做，我现在在Chrome上是直接出现横向滚动条了



<html>

    <table>

        <tr>

           <td width="10%">第一列</td>

           <div style="text-overflow:ellipsis;white-space:nowrap;overflow:hidden;"><td width="80%">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaabbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbccccccccccccccccccccccccccccccccccccddddddddddddddddddddddddddddddddddeeeeeeeeeeeeeeeeeeeeeeeeeeeee</td></div>

           <td width="10%">第三列</td>

        </tr>

    </table>

</html>

...全文

152 3 打赏收藏转发到动态举报

写回复

用AI写文章

3 条回复

切换为时间正序

请发表友善的回复…

发表回复

我自是年少-韶华倾负 2014-02-26

打赏
举报

display:block;overflow:hidden; white-space:nowrap;text-overflow:ellipsis;-o-text-overflow: ellipsis; 至于你说的要几行自己设置好 height line-height

luqing414 2014-02-25

打赏
举报

显示不下以省略号代替我自己实现了，但是最多显示2行应该怎么做，谁帮忙改改




<head>

<script>
	window.onload=function()
{
    var obj = document.getElementById('test');
    obj.style.width = document.documentElement.clientWidth * 4 / 5 + 'px';
}
</script>
 
</head>
 
<body>
	<table>
           <td width="10%">111</td>
           <td><div id="test" style="overflow:hidden; text-overflow:ellipsis; white-space:nowrap;">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaabbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbccccccccccccccccccccccccccccccccccccddddddddddddddddddddddddddddddddddeeeeeeeeeeeeeeeeeeeeeeeeeeeee</div></td>
           <td width="10%" style="float:right;">222</td>
    </table>
</body>
</html>