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

本文介绍如何使用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;/*隐藏的字符用省略号表示*/

表格内容太多怎么隐藏悬停才展示完整内容<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
<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
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值