div table 内容过长自动出现省略号

最新推荐文章于 2024-09-23 16:21:14 发布

原创最新推荐文章于 2024-09-23 16:21:14 发布 · 769 阅读

0 ·

CC 4.0 BY-SA版权

C# ASP.NET 专栏收录该内容

13 篇文章

订阅专栏

<html>
<head>
    <title>自动省略号</title>
    <style type="text/css" >
       
    #tableShow
    {
        width:800px;
        table-layout:fixed; 
    }
 
    #tableShow tr td
    {
        text-overflow:ellipsis;
        overflow:hidden;
        white-space: nowrap;
    }

    </style>
</head>

<body>

<div style="width:100px; text-overflow:ellipsis; overflow:hidden; white-space: nowrap;">
    测试内容测试内容测试内容测试内容
</div>

<table id="tableShow" >
  <tr>
    <td>
	    测试内容测试内容测试内容测试内容
    </td>
    <td>
	    测试内容测试内容测试内容测试内容
    </td>
    <td>
	    测试内容测试内容测试内容测试内容
    </td>
    <td>
	    测试内容测试内容测试内容测试内容
    </td>
    <td>
	    测试内容测试内容测试内容测试内容
    </td>
    <td>
	    测试内容测试内容测试内容测试内容
    </td>
  </tr>
</table>

</body>
</html>