设置<td></td>或<th></th>内容不换行，超出部分隐藏并用省略号代替无效时解决办法

最新推荐文章于 2022-06-21 13:24:18 发布
最新推荐文章于 2022-06-21 13:24:18 发布
阅读量2.3k 收藏 1
点赞数 3
CC 4.0 BY-SA版权
分类专栏： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_38455564/article/details/85290181
本文介绍如何使用CSS属性解决TD元素内容过长时的显示问题，通过设置white-space、overflow和text-overflow属性实现单行显示并用省略号表示隐藏的文本。

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

今天给一个td设置当内容过长，不换行隐藏超出部分内容时，死活设置不成。后来发现因为给table少加了一个属性table-layout: fixed;允许给td/th设置宽度。默认值为 table-layout: automatic 默认每一列列宽均分，不可设置列宽。

<td></td>中做如下设置：

white-space: nowrap;/*控制单行显示*/

overflow: hidden;/*超出隐藏*/

text-overflow: ellipsis;/*隐藏的字符用省略号表示*/

table设置td文本超出为省略号无效的解决方法
Sc_font的博客
05-28 467
td关键代码如下: white-space: nowrap;/*控制单行显示*/ overflow: hidden;/*超出隐藏*/ text-overflow: ellipsis;/*隐藏的字符用省略号表示*/ table代码如下: table-layout: fixed;(允许设置列宽,通过th) ...
表格教程:table的td也可以隐藏掉超出的内容
weixin_33827731的博客
01-19 413
表格教程:table的td也可以隐藏掉超出的内容,事实确实如此，如： <style type="text/css">table {width:500px;table-layout:fixed;}.col1 {width:100px;}.col2 {width:200px;}.col3 {width:200px;}td {white-space:nowrap;o...
td 超出宽度隐藏_css设置td th的内容超出宽度打点点
weixin_39767322的博客
12-21 715
一想到内容超出范围打点点，我们一下子就想到以下代码：overflow: hidden;text-overflow: ellipsis;white-space: nowrap;但是当我们给td设置了宽度之后，发现看度并不起作用。于是我开始设置table的宽度，发现任然不起作用。后来从网上发现table原来是这么设置的：给table 加table-layout:fixed。给table加宽度 只有给t...
表头文字不换行显示
monkeyHI
07-04 4475
最近碰到一个问题，一个测试平台项目中的表格列数太多，表头的文字会换行显示，这样会显得十分丑陋。建议给表头添加：（使文字在一行显示）th { white-space: nowrap; }这样做会让整列的宽度与该列表头的宽度一致，但是当表中数据很多时，会出现如下效果：会发现此时td的宽度与th的宽度一致，我们可以给th设置一个padding-right:200px，可以看到如下效果：而给td也...
table td内容超出部分隐藏
ChauncyTan的博客
12-26 2914
.stripe {/*my table*/ table-layout: fixed; margin: 0px; } .msg{/* td */ text-overflow: ellipsis; /* for IE */ -moz-text-overflow: ellipsis; /* for Firefox,mozilla */ overflow: hi...
设置<td></td>或<th></th>内容不换行，超出部分隐藏并用省略号，鼠标悬停时展示全部内容
07-14
您可以使用CSS的文本溢出处理属性来实现这个效果。具体步骤如下： ...通过以上步骤，您就可以实现在`<td>`或`<th>`中设置内容不换行，超出部分隐藏并用省略号表示，并在鼠标悬停时展示全部内容的效果了。
设置<td></td>或<th></th>内容不换行，超出部分隐藏并用省略号，鼠标停在省略号处时小框提示剩余内容
07-14
要实现在鼠标停留在省略号处时弹出小框提示剩余内容的效果，您可以...通过以上步骤，您可以实现在`<td>`或`<th>`中设置内容不换行，超出部分隐藏并用省略号表示，并在鼠标悬停时通过`title`属性显示全部内容的效果。
表格内容太多怎么隐藏悬停才展示完整内容<div style="max-height: 900px;overflow: auto;"> <table class="table table-hover table-bordered" style="margin-bottom: 0;"> <thead class="bg-light" style="position: sticky; top: 0; z-index: 1;"> <tr class="head-table"> <th>序号</th> <th>异常标识码</th> <th>操作</th> <th>异常类型</th> <th>工段</th> <th>异常来源</th> <th>异常项目</th> <th>异常等级</th> <th>设备</th> <th>批次号</th> <th>站点</th> <th>工艺流程</th> <th>产品料号</th> <th>异常描述</th> <th>异常CODE类型</th> <th>异常数据</th> <th>异常开始时间</th> <th>是否处理</th> <th>处理人员</th> <th>处理备注</th> <th>结案时间</th> </tr> </thead> <tbody> <tr th:each="data,iterStat : ${page.records}" class="center-table"> <td th:text="${iterStat.count}"></td> <td th:text="${data.ALARMTIMEKEY}"></td> <td th:text="${iterStat.count}"></td> <td th:text="${data.ISSUETYPE}"></td> <td th:text="${data.FACTORYNAME}"></td> <td th:text="${data.ALARMTYPE}"></td> <td th:text="${data.ALARMID}"></td> <td th:text="${data.ALARMLEVEL}"></td> <td th:text="${data.MACHINENAME}"></td> <td th:text="${data.LOTNAME}"></td> <td th:text="${data.PROCESSOPERATIONNAME}"></td> <td th:text="${data.PROCESSFLOWNAME}"></td> <td th:text="${data.PRODUCTSPECNAME}"></td> <td th:text="${data.ALARMCOMMENT}"></td> <td th:text="${data.REASONCODETYPE}"></td> <td th:text="${data.REASONCODE}"></td> <td th:text="${data.START_TIME}"></td> <td th:text="${data.SOLVEFLAG}"></td> <td th:text="${data.SOLVE_USER}"></td> <td th:text="${data.SOLVE_REASON}"></td> <td th:text="${data.END_TIME}"></td> </tr> <!-- 空数据提示 --> <tr th:if="${page.records.isEmpty()}"> <td colspan="21" class="text-center text-muted">暂无数据</td> </tr> </tbody> </table> </div>
03-08
<think>好的，我现在需要解决用户关于表格内容过多时如何隐藏并在悬停时展示完整内容的问题。首先，我需要理解用户提供的代码结构。用户有一个包含大量列和行的表格，包裹在一个最大高度为900px且带滚动条的div中。...
<template> <view> <view class="container"> <image class="bg-img" src="/static/back.jpg"></image> <view class="content"></view> </view> <view class="main-box"> <view class="horizontal-group"> <view class="son-box"> <image src="/static/b2.jpg" mode="aspectFill"></image> </view> <view class="info-panel"> <view class="result-title">检测结果</view> <view class="result-item"> <view class="label">目标数目:</view> <view class="value">4</view> </view> <view class="result-title" >目标选择</view> <view class="result-item"> <view class="label">类型：</view> <view class="value"></view> </view> <view class="result-item"> <view class="label">置信度：</view> <view class="value">93.1%</view> </view> <view class="confidence" :style="{color:getConfidenceColor(data,confidence)}"> </view> </view> </view> <view class="bottom-box"> <view class="dress-title">地址信息</view> <!--地址信息表格--> <uni-table border stripe emptyText="暂无更多数据" > <!-- 表头行 --> <uni-tr> <uni-th align="center">序号</uni-th> <uni-th align="center">时间</uni-th> <uni-th align="center">地址</uni-th> <uni-th align="center">详细</uni-th> </uni-tr> <uni-tr> <uni-td>1</uni-td> <uni-td>2025-3-23</uni-td> <uni-td>内蒙古呼和浩特市</uni-td> <uni-td>内蒙古工业大学金川校区</uni-td> </uni-tr> <uni-tr> <uni-td>2</uni-td> <uni-td>2025-3-23</uni-td> <uni-td>内蒙古呼和浩特市</uni-td> <uni-td>内蒙古工业大学</uni-td> </uni-tr> <uni-tr> <uni-td>3</uni-td> <uni-td>2025-3-23</uni-td> <uni-td>内蒙古呼和浩特市</uni-td> <uni-td>呼和浩特站</uni-td> </uni-tr> </uni-table> </view> </view> </view> </template> <script> export default { data() { return { } }, methods: { getConfidenceColor(val){ if(val>90)return'#52c41a'; if(v
最新发布
03-24
<think>好的，我现在需要帮助用户解决他们在UniApp中遇到的第二个子盒子样式控制不了的问题。根据用户提供的代码片段，首先我需要仔细分析他们的HTML结构和CSS样式可能存在哪些问题。 首先，用户的结构中有一个父...
td超出长度隐藏
祁梦@
06-21 722
td超出长度隐藏
td标签中，内容过长不会自动换行
qq_36437172的博客
03-06 2723
1.在<td>中设置样式style为word-wrap:break-word;word-break:break-all;（一般情况只需要设置word-break:break-all即可，但是有时候需要加word-wrap:break-word ） 2.把表格的sytle的table-layout：fixed，表格固定宽度，表格即要自适应他外面的容器，也不要撑出去，然后设置td的word...
TD内容超出则隐藏。兼容所有浏览器。
Happy_999‘Blog
06-26 8744
 http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/1999/xhtml">无标题文档style="table-layout:fixed">    20%">     60%" style="overflow:hidden; white-space:pre;" >brbrblfbrgt
td 超出宽度隐藏_div或td超出宽度的内容自动隐藏的写法【css代码实现】
weixin_39613951的博客
12-21 565
很多情况下，在网页设计时每个模块的宽度和高度都要固定，然后只需往模块里更新内容即可，但是如果内容过多，就有可能把模块撑大，从而使版面错乱。准对这个情况，网页设计时就要考虑到，每个模块的div或table的高宽一定不能因内容过多而变化，这需要在设计上使用一点技巧来实现。本文便介绍一个常用的也是非常简单的方法，这个方法是通过css代码来实现的。css代码实现div或td超出宽度的内容自动隐藏大家先看这...
内容超出表格<td>宽度则自动隐藏
weixin_33911824的博客
11-07 882
在表格中，有时候当表格中的内容多了就会把表格自动加宽、变形等问题。 如果想将超出表格的部分自动隐藏，解决办法如下： 第一种办法：直接隐藏（当文字超出TD宽时，自动隐藏），有个缺点就是可能最后面会出现只显示半个字的情况，印象美观。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//E...
英语口语400之每日二十个英语单词
无名
09-08 594
2020/08/25每日二十个英语单词 tertiary logic 三元逻辑 test access port (TAP) 测试存取端口 test and measurement (T&M) 测试及量度 test and measurement systems language (TMSL) 测试及量度系统语言 test board 试验板，测试板 test cell 测试储存单元 test charge 检验电荷 test clock (TCK) 测试时钟 test data i
table标签里td内容的超出/隐藏/鼠标悬停显示
qq_37029718的博客
03-18 7385
前言：有时候就是会碰到这种要求，非要在列表上就显示那种字段值很多的列，放到详情页面不完美吗 1、table中的td内容超出隐藏 asd 2、table中的td超出内容隐藏，鼠标悬停显示内容 adasf 3、css实现div（块级元素）内显示两行或者三行，超出部分用省略号显示 ...
表格td超出部分隐藏，显示...
ole_triangle_java的博客
12-30 819
页面 '+array[i].showMaterialName+' action packingSizeJsonObj.put("materialName",materialName); packingSizeJsonObj.put("showMaterialName", TriangleUIHelper.splitShowValue(materialName,
table表格中td单元格宽度及超出文字显示省略号
07-03 613
在做表格的时候遇到两个问题：表格宽度设置和超出文字省略号显示 1.表格宽度 　　需设置table的样式：table-layout:fixed;width: 100%; 　　然后在首行(th)设置宽度（最后一列不设置）。 主要是首行（th）设置宽度才有效 2.超出文字省略号显示 　　设置td的样式：overflow: hidden;text-overflow: ellip...
table里面的th、td设置宽度后文字还是超出，无法显示省略号
一叶青果的博客
07-05 3592
给td添加宽度后，发现文字还是超出范围，会根据内容宽度把table撑开，在table 标签添加样式 table-layout: fixed（很关键）; 必须设置width的值 :<table style="table-layout: fixed"> <td style="width:50px;">111111111111111111111111</td> ...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值