HTML Table表格单元格内内容超过宽度自动隐藏

最新推荐文章于 2023-02-16 23:56:48 发布

akwcaur7967808

最新推荐文章于 2023-02-16 23:56:48 发布

阅读量689

点赞数

文章标签：前端 xhtml ViewUI

原文链接：http://www.cnblogs.com/only-copy/articles/2516561.html

版权

Table表格单元格内内容超过宽度自动隐藏

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<body>
<p>
        <span style="color:#00F; font-size:18px;">Table表格单元格内内容超过宽度自动隐藏</span>
</p>
<table border="1" width="250" style="table-layout:fixed;" >
  <tr>
    <td width="150" style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis;">我是超出长度的内容，我将要隐藏超出部分</td>
    <td width="50" >测试</td>
    <td width="50">测试</td>
  </tr>
</table>
<p>
    Table表的宽要固定，且布局方式要固定。<br />
    TD属性<br />
    white-space:nowrap;    不允许文本换行<br />
    overflow:hidden;    超部分自动隐藏<br />
    text-overflow:ellipsis;    超出部分以省略号显示<br />
</p>
</body>
</html>

写成类，可以供多处调用，添加补白效果会更好

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<style type="text/css">
    .hiddenTDOverFlowContent{
        table-layout:fixed;
        }
    .hiddenTDOverFlowContent td{
        <!--添加补白比较好点-->
        padding-left:3px;
        padding-right:3px;
        white-space:nowrap;
        overflow:hidden;
        text-overflow:ellipsis;
        }
</style>
<body>
<p>
        <span style="color:#00F; font-size:18px;">Table表格单元格内内容超过宽度自动隐藏</span>
</p>
<table border="1" width="250" class="hiddenTDOverFlowContent" >
  <tr>
    <td width="150">我是超出长度的内容，我将要隐藏超出部分</td>
    <td width="50" >测试</td>
    <td >adfadfadfasdfasdfadfadfafafaffaf测试</td>
  </tr>
</table>
<p>
    Table表的宽要固定，且布局方式要固定。<br />
    TD属性<br />
    white-space:nowrap;    不允许文本换行<br />
    overflow:hidden;    超部分自动隐藏<br />
    text-overflow:ellipsis;    超出部分以省略号显示<br />
</p>
</body>
</html>