td长度固定，内容过长，超过部分用省略号代替

最新推荐文章于 2024-06-17 15:21:09 发布

原创最新推荐文章于 2024-06-17 15:21:09 发布 · 1.4k 阅读

0 ·

CC 4.0 BY-SA版权

JavaScript 同时被 2 个专栏收录

43 篇文章

订阅专栏

CSS样式

25 篇文章

订阅专栏

在网页设计中，为避免内容过多导致模块尺寸变化，可以使用CSS来固定模块宽度并隐藏超出部分。本文介绍了通过设置`table`和`td`或`div`的CSS样式，利用`max-width`, `overflow: hidden`, `white-space: nowrap`和`text-overflow: ellipsis`属性，实现当内容超出设定宽度时显示省略号的效果。" 117373890,5646601,宠物AI识别技术：狗鼻纹与猫面部识别新突破,"['AI技术', '宠物识别', '生物特征识别', '大数据应用', '智能安全']

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

很多情况下，在网页设计时每个模块的宽度和高度都要固定，然后只需往模块里更新内容即可，但是如果内容过多，就有可能把模块撑大，从而使版面错乱。准对这个情况，网页设计时就要考虑到，每个模块的div或table的高宽一定不能因内容过多而变化，这需要在设计上使用一点技巧来实现。本文便介绍一个常用的也是非常简单的方法，这个方法是通过css代码来实现的。

实现代码如下

1、隐藏超出td宽度的图片区域（或文字）

<table style="border:0px;table-layout: fixed;width:600px" ><tbody><tr><td style="max-width:600px;overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"><img src="..."></td></tr></tbody></table>

实现的css包含两个部分，一个是table的css，另一个是td的css。

table的css起到固定的作用，td的css的作用是隐藏超出宽度的内容。

2、隐藏超过div宽度的文字

<div style="max-width:150px;overflow: hidden; white-space: nowrap; text-overflow: ellipsis;">div的内容</div>

div的css跟table和td的css其实是一样的，div的css里需要加上宽度。

语法：

text-overflow：clip | ellipsis

默认值：clip

适用于：所有元素

clip：当对象内文本溢出时不显示省略标记（...），而是将溢出的部分裁切掉。
ellipsis：当对象内文本溢出时显示省略标记（...）。

在使用的时候，有时候发现不会出现省略标记效果，经过测试发现，使用ellipsis的时候，必须配合overflow:hidden; white-space:nowrap; width:50%;这三个样式共同使用才会有效果，示例代码：

<style type="text/css">
    .test{text-overflow:ellipsis;overflow:hidden;white-space:nowrap;width:150px;}
</style>

<div class="test">关于**产品的推广关于**产品的推广关于**产品的推广</div>

上面的width属性根据实际需要填写，其它样式是固定的。