(转)关于在<td>中显示文本的自动截断

最新推荐文章于 2021-11-16 15:18:46 发布
原创 最新推荐文章于 2021-11-16 15:18:46 发布 · 349 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#C #C++ #C# #XHTML #F#

本文介绍了一种HTML表格的样式优化方案，通过固定布局和文本溢出处理等样式设置，使得表格即使在内容长度不一时也能整齐显示。示例展示了如何使用CSS属性实现字符串的截断显示。

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


 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
table
{
 table-layout:fixed;
}
td
{
 text-overflow:ellipsis;
 white-space:nowrap;
 overflow:hidden;
}
</style>
</head>

<body>
<table width="100%" border="1" class="xTable">
  <tr>
    <td width="100">col_1</td>
    <td>col_2</td>
    <td width="120">col_3</td>
    <td width="100">col_4</td>
  </tr>
  <tr>
    <td>abcdefg</td>
    <td>a b c d e f g h i j k l m n o p q r s t u v w x y z a b c d e f g h i j k l m n o p q r s t u v w x y z a b c d e f g h i j k l m n o p q r s t u v w x y z a b c d e f g h i j k l m n o p q r s t u v w x y z</td>
    <td>abcdefg</td>
    <td>abcdefg</td>
  </tr>
</table>
</body>
</html>

 

 未添加截断字符串样式前：

 添加截断字符串样式后：



 (转自：http://0123.blog.163.com/blog/static/478831200910275422865/)

将td中文字过长的部分变成省略号显示的小技巧
09-25
通过将这三个属性结合起来，当TD中文字长度超出单元格宽度时，文本就会在不换行的情况下被截断，并在末尾显示省略号。这样的显示效果既美观又能向用户直观地表明有内容被隐藏了。 这个技巧非常适合用于需要在固定的...
利用CSS让<td>截断超长的内容
q77533005的专栏
08-21 476
要点: 1. 2. 设置title是为了让鼠标停留在td框上时能够看到全部内容.
jQuery获取自动截取过长的文本内容,显示成省略号形式。
张虹旺的博客
07-27 4598
table中如果td的内容过多,则会把td撑的很宽, 显得不美观. 如果能让td既美观.也能看到完整的效果..我们则需要,在生成td之前,给指定样式.. 这里采用jQuery来实现.具体代码如下://页面加载之后,设置.样式. jQuery(function(){ //使用id选择器;例如:tab对象->tr->td对象. $("#high_light tr td"
table td 文本自动截断 text-overflow:ellipsis
sqh001的专栏
10-11 1万+
.table-set { table-layout: fixed; }   .table-set td { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }   http://blog.sina.com.cn/s/blog_53d27b3a0100veuc.html 
td 内容超长截断处理
weixin_30412167的博客
07-05 518
将 td里面的内容超过一定的长度时，将后面的内容省略，并用省略号表示 <html> <head> </head> <body> <table width="200px" style="table-layout: fixed" border=2px ...
css 截取td 的字符串长度
lsjinpeng的专栏
05-08 337
在Div中的方法 就是比如有一行文字，很长，表格内一行显示不下. 就a是比如有一行文字，很长，表格内一行显示不下. 就1是比如有一行文字，很长，表格内一行显示不下. 就F是比如有一行文字，很长，表格内一行显示不下. 就是 Like You Pig Very Very Very Much. 在Table中的方法 内容内容内容内容内容内容内容内容内容内容内容内...
表格内容太多怎么隐藏悬停才展示完整内容<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
<td><span class="tooltip">截断文本<span class="tooltiptext">完整文本</span></span></td> 但这样需要修改HTML结构，可能对于动态生成的内容来说，需要调整Thymeleaf模板，将长文本部分包裹起来，并添加相应的类...
table <td>标签中丢失换行符问题及<pre>标签
06-08
但是有时候，由于单元格的宽度限制，一行文本会被自动截断成多行显示，这时候就会出现换行符丢失的情况。为了解决这个问题，我们可以在单元格中使用 pre 标签，它可以保留文本中的所有空格和换行符，并按照原有格式...
<tr bgcolor="#ffffff"> <td class="base" style="width: 15%;">立项依据：<span class="help-inline"><font color="red">*</font></span></td> <td colspan="3"> <div class="textarea-container"> <form:textarea path="initReason" htmlEscape="false" rows="4" maxlength="4000" class="required" style="width:80%;height: 80px;margin:2px;border: 1px solid #ccc;line-height: 28px;text-indent: 10px;" onchange="limitStr(this,4000)" onkeydown="limitStr(this,4000)" onkeyup="limitStr(this,4000)" /> </div> </td> </tr>实时监听文本字数
最新发布
03-25
2. **限制字数**：如果用户的输入超过了设定的最大字符数 (`maxChars`)，则自动截断多余的部分。 --- #### 方法二：jQuery 实现 对于熟悉 jQuery 的开发者来说，也可以利用其简洁的语法完成相同的功能。以下是从...
使用 <br> 标签没有生效
06-10
如果 `<br>` 标签没有生效，可能是因为表格的单元格（td 或 th）设置了固定的宽度或最小宽度，导致文本被截断。您可以尝试使用以下 CSS 属性： ```css white-space: normal; word-wrap: break-word; ``` 这将允许...
固定td宽度，超出部分截断
fyqcdbdx的专栏
11-28 2600
在IE下效果很好，固定td的宽度，超出部分截断用...显示，鼠标悬停有截断的则显示其完整的title。firefox不支持，只有截断的效果，无鼠标悬停效果，也没有... 几点说明的，table一定要带table-layout:fixed;样式，否则无效果。固定table的话就带此样式，还能增加显示速度。需要截断的td加上下面的ssss样式，并且td的内容放在div里面，div带'white-sp
table展示数据 数据过长截断的解决方案
程序媛
09-15 2508
1、我们在使用table展示数据时，有时有些字段内容比较长，如果全部展示，td将会换行，页面将会很难看，此时可以采用截断过长字符串的方法来解决，但是用户在查看时可能还要查看所有详细的信息，此时的解决方案有： [color=red]比如现在有一个比较长的字段要展示在table中：[/color] [color=blue]content[/color] = “我的内容比较...
教训：td不显示文本内容、textarea不能输入不能显示文本等等不能显示文本的原因和解决方法
qq_45863496的博客
11-16 1262
其实，这上面所有的不能显示文本内容的原因都是没有：设置字体和颜色，解决方法就是设置字体和颜色后，文本内容就显示出来了。
html td标签 限制字符长度
qq_34657993的博客
03-07 8734
${entity.newsTitle } title标签体是 鼠标在td标签上显示 文本内容 style具体的就是设置最大的宽度，多余的隐藏，多余的会以“......”
css截取td里面的内容 如何固定td th的宽度
热门推荐
szy1000的专栏
12-23 1万+
css截取td里面的内容 如何固定td th的宽度
table中td用CSS截取字符，超出用省略号...
u012531787的专栏
04-09 3932
html：
css控制td比内容宽5px_纯 CSS 实现多行文字截断
weixin_39837607的博客
11-29 242
做响应式系统设计的时候遇到需要对标题进行多行文字截取的效果，如下图：看似十分简单的标题截断效果，但是竟然没有一个统一 CSS 属性实现标准，需要用到一些奇淫妙计来实现，一般来说，在做这样文字截断效果时我们更多是希望：兼容性好，对各大主流浏览器有好的支持响应式截断，根据不同宽度做出调整文本超出范围才显示省略号，否则不显示省略号省略号位置显示刚好基于上述的准则，下面我就讲介绍各种技巧实现截断效果，并根...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值