如何将<td>文字过长的部分变成省略号显示

表格布局技巧
最新推荐文章于 2024-04-23 18:43:04 发布
原创 最新推荐文章于 2024-04-23 18:43:04 发布 · 3.1k 阅读 · 2 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文介绍了一种使表格在有限空间内显示更多的内容而不破坏整体布局的方法。通过设置表格样式为fixed并限定宽度，配合使用text-overflow、white-space及overflow属性，可以实现文本的省略显示。

最近的做的一个小项目需要用到就百度总结一下写了下来



首先设置表格的样式table-layout："fixed"再设置表格的宽度（这步必须）
最后再设置td样式的三个必要属性
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;


前端——HTML
LiLiLiLaLa的博客
04-22 8269
1.前端三门技术 学习Web前端技术需要掌握三门基本技术：HTML，CSS，JavaScript： HTML：HTML是网页内容的载体。内容就是网页制作者放在页面上想要用户浏览的信息，可以包含文件、图片、视频等 CSS：CSS样式是表现，就像网页的外衣比字体、颜色变化等 JavaScript：JavaScript用来实现网页上的特效效果。比如鼠标滑过弹出下拉菜单、鼠标滑过北京颜色改变等 使用工...
HTML入门与进阶以及HTML5
热门推荐
wuyxinu的博客
12-12 38万+
目录 一、简介 1、前端开发最核心技术 （1）HTML是什么？ （2）CSS （3）JavaScript 2、前端开发其他技术 二、基础内容 1.基础总结 2.HTML的基本标签 (1)HTML标签 (2)head标签 (3)body标签 3、段落与文字 (一)、段落标签 (二)、网页特殊符号 (三)、自闭合标签 (四)、块元素和行内元素 (五)、练...
将td中文字过长的部分变成省略号显示的小技巧
09-25
主要介绍了如何将td中文字过长的部分变成省略号显示，主要是利用到了css的几个属性，需要的朋友可以参考下
在td标签中文字超出显示省略号，鼠标悬停显示所有文本
weixin_43383479的博客
04-30 8359
在td标签中文字超出显示省略号，鼠标悬停显示所有文本 首先得在table的style中加入table-layout:fixed，让表格固定，然后用width设定表格的宽度。 然后表格中所有的列都一样宽了，这样肯定不好，所以要在tbody上加入<col style="width:10%">这个标签，有几列就加几个，这样就能调节宽度了 然后在td标签中加入如下的属性 <td styl...
css表格td文字超出部分用省略号表示
aq9527的博客
04-09 4351
table { table-layout: fixed;} //必须，表格宽度不随文字增多而变长。 td { white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}表格需设置宽度table-layout: fixed 由于table-layout的默认值是auto，即table的宽高将取决于其内容的多寡，如果内容的体积无法估测，...
table td文字超出显示省略号
YiZhiMei01的博客
06-28 4275
table { table-layout: fixed;} //必须，表格宽度不随文字增多而变长。 td { white-space: nowrap;overflow: hidden;text-overflow: ellipsis;} <body> <table> <thead> <th> 第一列 </th> &lt
HTML+CSS部分知识点整合（结合案例实际运用归纳）
m0_46799664的博客
09-11 660
HTML+CSS制作静态页面第一部分 基础知识HTML各个标签的分类以及用途行内元素丶块级元素以及行内块元素合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 第一部分 基础知识 HTML各个标签的分类以及用途 HTML的众多标签可以分为两大类
＜html＞ 从0到1的教学实践分享（全网最全）
HongYingClub-优快云
04-23 1419
超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。您可以使用 HTML 来建立自己的 WEB 站点，HTML 运行在浏览器上，由浏览器来解析。
如果文字过长,则将过长的部分变成省略号显示
weixin_34242509的博客
04-01 148
<DIVSTYLE="width:120px;height:50px;border:1pxsolidblue; overflow:hidden;text-overflow:ellipsis"> <NOBR>就是比如有一行文字，很长，表格内一行显示不下.</NOBR> </DIV> 就是...
字符串过长CSS截取多余文字并用省略号显示
12-13
最近才知道css也有这么叼炸天的一面~~~ 做个类似论坛的页面，用户头像70px，但是用户名没法限定啊，英文中文都可以，你说他要是取个“我的名字好长呀，你该怎么办呢”，那老衲不就狂急了~~ 幸好，老衲于不幸中的万幸中发现了css这么叼炸天的一面，以前一直不知道，写出来分享给大家 很简单，话不多说，直接上代码： css里面如下设置： 复制代码代码如下: a.name{ line-height: 30px; text-align: center; <span xss=removed>text-overflow:ellipsis;</span>//让超出的用…实现 <
table的 td 单行超出部分,用省略号代替
一止弋的博客
01-16 2389
目的是更改换行显示,使单行超出部分用"…"代替; 常规的在单个容器(如 div)中, div { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } 但在 table 中不太好用: 要想起作用,需要添加 table{ width: 160px; table-layout: fixed; ...
表格td内容过多时，td显示省略号，鼠标移入显示全部内容。
一树菩提一烟霞的博客
06-13 1万+
两种方式显示： 1.title方式显示：           .tb{width:800px;font-size:12px;background:#6887D9}   .tb thead th{height:25px;background:#217AC4;color:white}   .tb tbody td{height:22px;background:whi
td长度固定，内容过长，超过部分用省略号代替
iBenxiaohai123的博客
07-28 1511
很多情况下，在网页设计时每个模块的宽度和高度都要固定，然后只需往模块里更新内容即可，但是如果内容过多，就有可能把模块撑大，从而使版面错乱。准对这个情况，网页设计时就要考虑到，每个模块的div或table的高宽一定不能因内容过多而变化，这需要在设计上使用一点技巧来实现。本文便介绍一个常用的也是非常简单的方法，这个方法是通过css代码来实现的。 实现代码如下 1、隐藏超出td宽度的图片区域（或
table中td用CSS截取字符，超出用省略号...
u012531787的专栏
04-09 3949
html：
html表格td溢出显示省略号
qq_35469137的博客
11-07 1112
给td中的文字套了一个p标签，给p标签设置overflow:hidden;并且给p设置宽度 就可以解决以上问题。/* 只有定义了表格的布局算法为fixed，下面td的定义才能起作用。设置此属性之后td以50%和50%显示 */text-overflow:ellipsis;
html td内容超出省略,table中td文字超出长度用省略号隐藏超出内容，鼠标点击内容全部显示...
weixin_33603963的博客
06-09 2665
1，设置css样式table {width: 100%;float: left;table-layout:fixed;width:600px;border:1px solid #ccc;}table tr {line-height: 25px;border:1px solid #ccc;}table td {border:1px solid #ccc;text-align:center;}.MHo...
div&td超出部分省略号表示
喜欢前端的后端开发
07-24 913
前提是div宽度和table宽度固定 代码： div.wid{ width:300px; white-space:nowrap; text-overflow:ellipsis; -o-text-overflow:ellipsis; overflow: hidden; } .tab { width : 300px; } thi
＜td＞文字过长的部分变成省略号显示
青春不打烊的博客
09-02 810
首先设置表格的样式table-layout："fixed"再设置表格的宽度（这步必须） 最后再设置td样式的三个必要属性 text-overflow: ellipsis; white-space: nowrap; overflow: hidden; 之后在td添加title 如： <td style="text-overflow: ellipsis;white-space: nowrap;overflow: hidden;"title="${been.goods_name}">${bee..
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title></title> </head> <body> <table> <tr> <td>姓名</td> <td>数据</td> <td>日期</td> </tr> <tr> <td>杨树森</td> <td>10分/td> <td>2025年7月12日</td> </tr> <tr> <td>易建联</td> <td>9分</td> <td>2007年10月31日</td> </tr> <tr> <td>王治郅</td> <td>6分</td> <td>2001年4月6日</td> </tr> <tr> <td>孙悦</td> <td>4分</td> <td>2008年12月8日</td> </tr> <tr> <td>周琦</td> <td>2分</td> <td>2018年10月3日</td> </tr> <tr> <td>姚明</td> <td>0分</td> <td>2002年10月31日</td> <tr> <td>崔永熙</td> <td>6分</td> <td>2024年10月28日</td> </tr> </tr> </table> <br> </body> </html>表格整体居中
最新发布
11-08
要将 HTML 表格整体居中显示，可以通过 CSS 来实现。有多种方式可以达成此目的，以下给出两种常见的方法。 ### 方法一：使用 `margin: 0 auto` 在 CSS 中，设置元素的左右外边距为 `auto`，可以让元素在其父元素中水平居中。 ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title></title> <style> table { margin: 0 auto; } </style> </head> <body> <table> <tr> <td>姓名</td> <td>数据</td> <td>日期</td> </tr> <tr> <td>杨树森</td> <td>10分</td> <td>2025年7月12日</td> </tr> <tr> <td>易建联</td> <td>9分</td> <td>2007年10月31日</td> </tr> <tr> <td>王治郅</td> <td>6分</td> <td>2001年4月6日</td> </tr> <tr> <td>孙悦</td> <td>4分</td> <td>2008年12月8日</td> </tr> <tr> <td>周琦</td> <td>2分</td> <td>2018年10月3日</td> </tr> <tr> <td>姚明</td> <td>0分</td> <td>2002年10月31日</td> </tr> <tr> <td>崔永熙</td> <td>6分</td> <td>2024年10月28日</td> </tr> </table> <br> </body> </html> ``` ### 方法二：使用 `text-align: center` 和 `display: inline-table` 先将父元素的文本内容居中，再将表格的显示方式设置为 `inline-table`。 ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title></title> <style> body { text-align: center; } table { display: inline-table; } </style> </head> <body> <table> <tr> <td>姓名</td> <td>数据</td> <td>日期</td> </tr> <tr> <td>杨树森</td> <td>10分</td> <td>2025年7月12日</td> </tr> <tr> <td>易建联</td> <td>9分</td> <td>2007年10月31日</td> </tr> <tr> <td>王治郅</td> <td>6分</td> <td>2001年4月6日</td> </tr> <tr> <td>孙悦</td> <td>4分</td> <td>2008年12月8日</td> </tr> <tr> <td>周琦</td> <td>2分</td> <td>2018年10月3日</td> </tr> <tr> <td>姚明</td> <td>0分</td> <td>2002年10月31日</td> </tr> <tr> <td>崔永熙</td> <td>6分</td> <td>2024年10月28日</td> </tr> </table> <br> </body> </html> ```
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值