table文字超出显示省略号

最新推荐文章于 2021-06-09 15:17:55 发布

codertrs

最新推荐文章于 2021-06-09 15:17:55 发布

阅读量2.6k

点赞数 3

文章标签： css html html5 css3

本文链接：https://blog.youkuaiyun.com/qq_46006194/article/details/115644040

版权

本文介绍了如何使用CSS样式实现表格中文字超出长度时显示省略号的效果。通过设置`table-layout: fixed`固定表格布局，结合`width`设定表格宽度，然后在需要限制的`td`单元格内应用`text-overflow: ellipsis`、`white-space: nowrap`和`overflow: hidden`属性，可以实现文本超出部分以省略号显示，保持表格整洁。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

tbale文字超出显示省略号

代码很简单，一个简单表格

设置表格的样式table-layout："fixed"再设置表格的宽度（这步必须）
设置文字过长部分需要用到text-overflow标签，设置为 ellipsis，意思为文本超出部分为省略号;
设置整体为本过长需要用white-space标签，设置为 nowrap，意思是文本不换行；
同时需要设置整体标签超出部分为不显示，设置方法为：overflow: hidden;
这样就ok了！

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>

    table{
        table-layout: fixed;
        width: 100%;
    }
</style>
<body>

<table border="1px">
    <tr id="test" >
        <td>姓名</td>
        <td>年龄</td>
        <td>性别</td>
        <td>简介</td>
    </tr>
    <tr>
        <td>大表格</td>
        <td>23</td>
        <td>男</td>
        <td style="text-overflow:ellipsis; white-space: nowrap; overflow: hidden;  ">
            首先设置表格的样式table-layout："fixed"再设置表格的宽度（这步必须）
            在设置文字过长部分需要用到text-overflow标签，设置为 ellipsis，意思为文本超出部分为省略号；
            同设置整体为本过长需要用white-space标签，设置为 nowrap，意思是文本不换行；
            同时需要设置整体标签超出部分为不显示，设置方法为：overflow: hidden;
            整体设置标签为：td {text-overflow: ellipsis; white-space: nowrap; overflow: hidden; }

        </td>
    </tr>
</table>

</body>
</html>

图片

在这里插入图片描述