2021-10-16

最新推荐文章于 2025-06-05 20:08:17 发布

指尖世界￡

最新推荐文章于 2025-06-05 20:08:17 发布

阅读量80

点赞数

分类专栏： HTML 文章标签： css html html5

本文链接：https://blog.youkuaiyun.com/weixin_44389618/article/details/120805369

版权

HTML 专栏收录该内容

3 篇文章

订阅专栏

解决表格文本内容超出限制的办法

这里需要用到CSS，纯HTML的话没找到解决办法，要是有大神知道的话，麻烦留言告知一下，谢谢。

以下是核心代码

.content{
        table-layout:fixed;/*列宽由表格宽度和列宽度设定。*/
        }
    .content td{   
        white-space:nowrap;/*不允许文本换行*/
        overflow:hidden;/*超部分自动隐藏*/
        text-overflow:ellipsis;/*超出部分以省略号显示*/
        }

content为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>
<style type="text/css">
    .content{
        table-layout:fixed;/*列宽由表格宽度和列宽度设定。*/
        }
    .content td{   
        white-space:nowrap;/*不允许文本换行*/
        overflow:hidden;/*超部分自动隐藏*/
        text-overflow:ellipsis;/*超出部分以省略号显示*/
        }
</style>
<body>
<table border="1" width="250" class="content" >
  <tr>
    <td width="150">我是超出长度的内容，我将要隐藏超出部分</td>
    <td width="50" >测试</td>
    <td >adfadfadfasdfasdfadfadfafafaffaf测试</td>
  </tr>
</table>
</body>
</html>

如果文章帮助到你，请留下你的小心心，谢谢。