如何让table单元格不换行且末尾显示省略号？

最新推荐文章于 2024-05-08 15:13:28 发布

f8下一步

最新推荐文章于 2024-05-08 15:13:28 发布

阅读量1.4k

点赞数

本文链接：https://blog.csdn.net/weixin_44712870/article/details/116059518

版权

首先在table标签中添加样式table-layout: fixed以固定表格布局，避免单元格在单词过长时被撑宽；
其次在td标签中添加样式white-space: nowrap来禁止换行，添加样式overflow: hidden来隐藏超出部分，添加样式text-overflow: ellipsis将超出部分显示为省略号。

原代码及效果：

<table border="1" width="100%">
    <tr>
        <td>啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊</td>
        <td>不不不不不不不不不不不不不不不不不不不不不不不不不不不不不不不</td>
        <td>啛啛喳喳错错错错错错错错错错错错错错错错错错错错错错错错错错错错错</td>
    </tr>
    <tr>
        <td>哒哒哒哒哒哒多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多</td>
        <td>呃呃呃呃呃呃呃呃呃呃呃呃呃呃呃呃呃呃呃呃呃呃呃呃呃呃呃鹅鹅鹅鹅鹅鹅饿鹅饿</td>
        <td>发发发发发发付付付付付付付付付付付付付付付付付付付付付付付付付付付付付</td>
    </tr>
</table>

在这里插入图片描述
修改后的代码及效果：

<table border="1" width="100%" style="table-layout: fixed;">
    <tr>
        <td style="white-space: nowrap;overflow: hidden;text-overflow: ellipsis">啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊</td>
        <td>不不不不不不不不不不不不不不不不不不不不不不不不不不不不不不不</td>
        <td>啛啛喳喳错错错错错错错错错错错错错错错错错错错错错错错错错错错错错</td>
    </tr>
    <tr>
        <td>哒哒哒哒哒哒多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多</td>
        <td>呃呃呃呃呃呃呃呃呃呃呃呃呃呃呃呃呃呃呃呃呃呃呃呃呃呃呃鹅鹅鹅鹅鹅鹅饿鹅饿</td>
        <td>发发发发发发付付付付付付付付付付付付付付付付付付付付付付付付付付付付付</td>
    </tr>
</table>

在这里插入图片描述

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        td{
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
    </style>
</head>
<body>
<table border="1" width="100%" style="table-layout: fixed;">
    <tr>
        <td>啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊</td>
        <td>不不不不不不不不不不不不不不不不不不不不不不不不不不不不不不不</td>
        <td>啛啛喳喳错错错错错错错错错错错错错错错错错错错错错错错错错错错错错</td>
    </tr>
    <tr>
        <td>哒哒哒哒哒哒多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多</td>
        <td>呃呃呃呃呃呃呃呃呃呃呃呃呃呃呃呃呃呃呃呃呃呃呃呃呃呃呃鹅鹅鹅鹅鹅鹅饿鹅饿</td>
        <td>发发发发发发付付付付付付付付付付付付付付付付付付付付付付付付付付付付付</td>
    </tr>
</table>