table超长部分用...代替

最新推荐文章于 2021-10-13 10:59:10 发布

原创最新推荐文章于 2021-10-13 10:59:10 发布 · 908 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html #css

css 同时被 2 个专栏收录

5 篇文章

订阅专栏

html

5 篇文章

订阅专栏

本文介绍了一个包含评论内容和音频链接的表格样式案例。该表格使用了固定布局，并通过CSS实现了当内容过长时以省略号形式显示的效果。

<table  style="table-layout: fixed;  >
                <thead>
                    <tr class="warning" >
                        <th  >评论内容</th>
                        <th  >音频链接</th>
                    </tr>
                </thead>
                <tbody>

                    <tr >
                        <td class="tdOverHidden">22222222222222222222222222222222222222222</td>
                        <td class="tdOverHidden">444444444444444444444444444444444444444444444444</td>

                    </tr>

                </tbody>
            </table>
.tdOverHidden{
    text-overflow:ellipsis;//用...表示隐藏的部分
    white-space:nowrap;//不换行
    overflow:hidden;//隐藏超过宽度的部分
}