html/css之设置单元格内容省略的用法

最新推荐文章于 2023-04-19 16:07:01 发布

Jay Jen

最新推荐文章于 2023-04-19 16:07:01 发布

阅读量552

点赞数 1

分类专栏：笔记文章标签： html css

本文链接：https://blog.csdn.net/weixin_48624193/article/details/115799493

版权

笔记专栏收录该内容

5 篇文章 0 订阅

订阅专栏

在练习前端制作表格的时候，想起了上课最后一分钟左右老师急急忙忙的讲了一下关于单元格内容超出单元格宽度的解决办法，就是将超出单元格的内容设置为省略号。刚刚操作的时候做出来了，现在来做一下总结。总的来说可以分2步走。
1.首先我们需要固定表格使用如下代码``如果不固定的话单元格是平均分配的或者随着单元格的内容不同而分配，即会被撑大

table{
	table-layout:fixed;
}

2.设置单元格，代码如下

td{
	overflow:hidden;  //隐藏超出单元格的内容
	white-space:nowrap;   //不换行
	text-overflow:ellipsis;  //设置省略号
}

代码如下所示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表格的使用</title>
</head>
<body>

    <table align="center" width="100%" border="1px">
        <caption >关于小周周的表格</caption>
        <tr>
            <td >无名之辈 我是谁 小小的天 也有大大的梦想</td>
            <td >Jay</td>
            <td >Jen</td>
            <td >jojo</td>
        </tr>
        <tr>
            <td>小公举</td>
            <td>周杰伦</td>
            <td>Chou</td>
            <td>小周周</td>
        </tr>
    </table>
</body>
</html>
<style>
    td{
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
    table{
        table-layout: fixed;
    }
</style>

效果如下图所示

在这里插入图片描述
从图中我们可以看到第一个单元格后面的内容省略了，实现了我们想要的效果。
好啦关于单元格内容的省略小周周就介绍到这里了，后续学完表格的相关知识再来更新吧。
小手轻轻送上❤，周周不断在更新。
【无名之辈我是谁小小的天也有大大的梦想】

Jay Jen

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
html/css之设置单元格内容省略的用法

在练习前端制作表格的时候，想起了上课最后一分钟左右老师急急忙忙的讲了一下关于单元格内容超出单元格宽度的解决办法，就是将超出单元格的内容设置为省略号。刚刚操作的时候做出来了，现在来做一下总结。总的来说可以分2步走。1.首先我们需要固定表格使用如下代码``如果不固定的话单元格是平均分配的或者随着单元格的内容不同而分配，即会被撑大table{ table-layout:fixed;}2.设置单元格，代码如下td{ overflow:hidden; //隐藏超出单元格的内容 white-spa
复制链接

扫一扫