td内容过长，table被撑开问题解决

最新推荐文章于 2021-12-27 11:18:07 发布
原创 最新推荐文章于 2021-12-27 11:18:07 发布 · 9.8k 阅读 · 8 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文介绍了一种解决表格内容过长导致布局变形的问题的方法。通过应用特定的CSS样式，如overflow:hidden; text-overflow:ellipsis; white-space:nowrap; 并结合table-layout:fixed; 和word-break:break-all;，可以实现表格内容的优雅省略显示。

这里写图片描述
由于table tr 内容过长，然后使用省略样式后， table长度被撑开，
overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;
这里写图片描述

解决方法：

在table上加样式：

table-layout: fixed;
word-break: break-all;

这里写图片描述

完美解决。

css实现不再让内容把td撑开的常用解决方法
09-25
在网页设计中，经常遇到一个问题，那就是表格中的单元格（td）会被其内部的内容自动撑开，导致表格的布局混乱。这种情况通常是由于内容长度超过了单元格的预设宽度，浏览器会默认扩展单元格来适应内容。然而，我们...
javascript 使td内容不换行不撑开
10-27
本文将深入探讨如何使用JavaScript和CSS来实现`td`内容不换行且不撑开单元格的效果。 首先，我们需要理解CSS中的几个关键属性，它们在解决这个问题上起着核心作用： 1. `white-space`: 这个属性控制元素内的空白符...
td中显示信息过长撑开td的解决办法
IT猿_Ocean的成长之路
10-29 1675
首先咱们需要对td所在的table添加一个style style="table-layout:fixed;" 必须要这么添，而且必须添 然后在你的td中设置这样的style style="overflow:hidden;text-overflow:ellipsis;word-break:keep-all;white-space:nowrap;" 设置完成之后，就可以看到td中内
td过长，将固定宽度table撑开
weixin_39037804的博客
08-16 229
解决办法： 在table上加上样式: 　　 table{table-layout:fixed;word-break:break-all} table-layout:fixed tablle的列宽...
TD不换行 nowrap属性
热门推荐
有梦就能实现
11-23 9万+
表格table的td单元格中，文字长了往往会撑开单元格，但是如果table都不够宽了，就换行了好像（不要较真其他情况，我只说会换行的情况）。换行后的表格显得乱糟糟，不太好看，我不喜欢这样的换行。当然可以通过对每列td都设置宽度，那样太麻烦了，并且有时没法预计td中的文字会有多长，没法给固定宽度。 为了让表格里文字不换行（预计也不会太长的字符串），可以给表格里td添加一个nowrap属性，如
table td长度被撑开
harry_yaya的博客
04-24 1724
td长度被撑开 问题复现： 一个table ，为每个td设置了宽度百分比，但是实际效果是td的宽度还是被撑开了 代码如下： <table className={styles.selfAchievement}> <tr className={styles.selfAchievementTr}> <td style={{width:"17%"}}&g...
html 单元格被撑开_表格单元格td设置宽度无效始终有内部的内容撑开
weixin_32137855的博客
03-06 1169
摘要：这篇HTML栏目下的“表格单元格td设置宽度无效始终有内部的内容撑开”，介绍的技术点是“表格单元格、设置宽度、宽度无效、单元格、单元、设置”，希望对大家开发技术学习和问题解决有帮助。在做table页面时，有时对td设置的宽度是无效的，td的宽度始终有内部的内容撑开，可以设置padding，但直接设置width却无效，下面我们来具体看下这个示例：复制代码代码如下:100080010000001...
table中td内容换行问题
11-30
例如l：lovelovelovelovelovelovelovelovelovelovelovelove这样的，于是乎，我们的td就被无情的撑开了，无法换行，⊙﹏⊙ 解决方案： 一般有两种：就是td里面再套一个div，然后设置这个div的word-break：all，或者...
表格单元格td设置宽度无效始终有内部的内容撑开
09-28
然而，在实际操作中，有时我们会遇到一个棘手的问题：给`<td>`设置宽度（`width`）后，发现宽度设置似乎无效，单元格的宽度仍然被其内部的内容撑开。这个问题在标题和描述中被提及，让我们详细探讨一下这个问题的...
解决td内容过长撑开table的固定宽度
李菇凉的博客
08-29 5199
table表格宽度固定，需td内容过长也不会被撑开时，设置如下css： table{table-layout:fixed;word-break:break-all;}
解决td元素中文字一行撑开的问题
tianbinve3363的博客
01-25 800
存在的问题:table文字换行 解决后: 将th td元素加上属性 noWrap="noWrap" 即可解决当前文字分行问题
解决ie8以上及ff,chrome等浏览器表格td文字撑大问题
weixin_30468137的博客
07-15 281
首先我们需要制定td的宽度，指定完后我们在表格的样式中加入： table-layout: fixed; 然后在td的样式中加入: white-space:nowrap; /*一行显示*/ text-overflow:ellipsis; /*显示...*/ overflow: hidden; /*缺少无效*/ 这样列就不会被撑大了，动手试试吧 转载于:http...
不让TD中的文本撑开表格
dandelion_b的专栏
01-11 784
不让TD中的文本撑开表格<br />文章分类:Web前端<br /> <br />我经常会遇到这样的问题：在设计好宽度的表格中，因为有些文本信息过长，而把表格撑开（弄的面目全非）！很让人头疼。其实解决这个问题很简单，只要在<td>的样式中加入word-break: break-all（强制换行），就会使那些不听话的文本自动回行。是我刚刚学到的，一起分享~~~<br /> <br />一起看看吧：<br /> <br />使用word-break之前： Html代码 <table width="300" bo
td内容过长table被撑开
WHACKW的专栏
07-17 6661
table表格宽度固定，同时td内容过长也不会被撑开，设置如下css： table{table-layout:fixed;word-break:break-all;} overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
TD中内容太长撑破了样式的处理方法
meimonkey的专栏
06-11 2010
在对应的中加上样式：style="word-break:break-all;"让长文本自动的h
td或li中内容太长撑破了样式的处理方法
longe20111104的博客
12-27 343
在对应的td或li中加上样式：style="word-break:break-all;"让长文本自动的换行。
table中td标签中内容过长时，设置td长度固定的方法
weixin_37861326的博客
06-25 1万+
在使用table标签时，我们设置了td的宽度且设置了单行溢出加省略号的样式，但是发现，td还是随内容的多少会撑开，如下图：这样就不符合我们预期想要的效果，我们只需要在table标签上加属性： width="100%"  style="table-layout:fixed"cellpadding，cellspacing这两个属性用于清除td标签的间隙。此外td设置样式：overflow: hidde...
div通过高度和overflow-y样式设置显示滑块;但是外层的td和table会被撑开高度
最新发布
10-29
当您尝试在一个`<div>`上应用高度(`height`)和`overflow-y`样式来创建滑块效果，如果这个`<div>`包含在一个`<td>`和`<table>`结构中，滑块的内容可能会导致外层`<td>`和`<table>`的高度随着内容增加而自动扩展。 为了解决这个问题，你需要设置`<td>`和`<table>`的`overflow`属性为`hidden`或者`scroll`，并且给它们添加一个固定的`max-height`值，这样就不会受到内部内容高度的影响。这样做的代码可能是这样的： ```css .table-container { width: 100%; position: relative; } .slider { height: 200px; /* 滑块高度 */ overflow-y: auto; max-height: 100%; /* 限制table的高度 */ position: absolute; top: 0; left: 0; right: 0; } .content { overflow-y: hidden; /* 只允许内部滑块内容滚动 */ } ``` HTML结构会像这样： ```html <table class="table-container"> <tbody> <tr> <td class="content"> <div class="slider"> <!-- 滑块内容 --> </div> </td> </tr> </tbody> </table> ``` 这样，即使滑块内容很长，外层的`<td>`和`<table>`也不会被撑开到内容的实际高度。
评论 5
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值