html td内容超出省略,table中td文字超出长度用省略号隐藏超出内容，鼠标点击内容全部显示...

最新推荐文章于 2023-02-16 23:56:48 发布
最新推荐文章于 2023-02-16 23:56:48 发布
阅读量2.6k 收藏 1
点赞数
文章标签： html td内容超出省略

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;

}

.MHover{

border:1px solid #ccc;

white-space:nowrap;

text-overflow:ellipsis;

overflow:hidden;

}

2，js设置click和mousemove和mouseout事件

$(document).ready(function () {

$(".MALL").hide();

$(".MHover").click(function (e) {

$(this).next(".MALL").css({"position":"absolute","top":e.pageY+5,"left":e.pageX+5}).show();

});

$(".MHover").mousemove(function (e) {

$(this).next(".MALL").css({ "color": "fff", "position": "absolute", "opacity": "0.7", "background-color": "666", "top": e.pageY + 5, "left": e.pageX + 5 });

});

$(".MHover").mouseout(function () {

$(this).next(".MALL").hide();

});

});

3，HTML内容,在td中新增两个div，两个div中的内容必须一致。

姓名个性签名性别
狗子
嘻嘻嘻嘻嘻哈哈12345上山打老虎嘻嘻嘻嘻嘻哈哈
嘻嘻嘻嘻嘻哈哈12345上山打老虎嘻嘻嘻嘻嘻哈哈
男

CSS3让一段文字多余的用省略号表示，当鼠标移动上去的时候显示全部文字

如何让table中td宽度固定

table中td会随着里面的内容伸缩,设置其width样式并没有效果.这个时候需要下面的CSS可以实现. 首先是设置table .table {table-layout:fixed;} 其次是td . ...

如何让table中td与四周有间距

如何让table中td与四周有间距 方法一 在td下再添加一个会计元素

第2节 语文 < ...

table中td内容过长 省略号显示

首先设置 css样式: table { table-layout: fixed;} HTML中的table代码:

点此查看详细table的td的valign属性

表格中td限宽溢出以省略号代替

table.ms-listviewtable { table-layout:fixed; width: 100%; } table.ms-listviewtable td[role="gri ...

随机推荐

LZ77压缩算法编码原理详解&lpar;结合图片和简单代码&rpar;

前言 LZ77算法是无损压缩算法,由以色列人Abraham Lempel发表于1977年.LZ77是典型的基于字典的压缩算法,现在很多压缩技术都是基于LZ77.鉴于其在数据压缩领域的地位,本文将结合图 ...

js面向对象总结(一)

在 js 中,对象由特性(attribute)构成,特性可以是原始值,也可以是引用值.如果特性存放的是函数,它将被看作对象的方法(method),否则该特性被看作对象的属性(property).在js ...

MySQL Proxy

最近翻看了mysql proxy的资料,特发上来. mysql proxy的推荐使用方式是采用配置文件来完成,当前在命令行的执行如下:mysql-proxy -P 192.168.1.101:3306 ...

UVA1555-- Garland&lpar;推导&plus;二分&rpar;

题意:有n个灯,给定第一盏灯A的高度,接下去每盏灯的高度按照公式计算,求使所有灯都不会落在地上(允许碰触)的B的最低高度. uva 输出 double 用 %f,这一波坑的! #include &lt ...

CentOS7安装memcached

三台linux服务器系统CentOS7 一台memcached IP:192.168.155.134 一台Apache IP:192.168.155.130 一台nginx IP:192.168.15 ...

HDU 1247 Hat’s Words &lpar;字符串匹配，暴力&rpar;

题意: 给出一堆单词,如果有一个单词可以分成左右串两个单词,并且在所给的一堆单词中存在,就是hat词,统计所有这样的词,并按字典序输出. 思路: 注意定义,一个hat词可以被两部分已经存在的词组成,那 ...

PostgreSQL中的AnyArray例子

http://www.joeconway.com/presentations/function_basics.pdf CREATE FUNCTION myappend(anyarray, anyele ...

hotmail邮箱pop3server设置方法

hotmail邮箱 的POP3/SMTP功能仅仅向Hotmail Plus的用户开放,普通用户想要使用这一功能的话,得进行一些特别的设置.如今这一功能总算面向全部的用户开放了,虽然微软官方还没宣布这一 ...

翻译连载 &vert; 附录 A：Transducing(下)－《JavaScript轻量级函数式编程》 &vert;《你不知道的JS》姊妹篇

原文地址:Functional-Light-JS 原文作者:Kyle Simpson-作者 关于译者:这是一个流淌着沪江血液的纯粹工程:认真,是 HTM ...

C&plus;&plus;笔记004：C&plus;&plus;类通俗点说

核心: C++的类就是对C语言的结构体进行了扩展,C++的结构体可以包含函数! ------------------------------------------------------ 我们学习C ...

wonder-yyc
关注
HTML如何让table中的td内容过长显示为固定长度，多余部分用省略号代替
梦回星月
05-26 4340
这个问题呢，是由于我们公司测试的部门测出来的，虽然说测试的内容本身就是个BUG，不过这个也让我学到了一个比较好的归类于布局的一个小技巧，就是将td标签中过长的内容只显示为这个td的width的长度，之后的便以省略号代替。 方式如下：        这个功能有一个前提，在table中必须设置style: table-layout: fixed;  这条属性就是让table的内部布局固定大...
Layer.js实现表格溢出内容省略号显示,悬停显示全部的方法
10-16
在本文中，我们将深入探讨如何使用Layer.js库来实现表格中溢出内容的省略号显示，并在鼠标悬停时显示全部内容。Layer.js是一个强大的弹层组件，它提供了丰富的功能，包括弹窗、提示、加载层等。在这个场景中，我们将...
html td内容超出省略号,table td 文字超出显示省略号
weixin_39710251的博客
06-10 224
.tb{width:800px;font-size:12px;background:#6887D9}.tb thead th{height:25px;background:#217AC4;color:white}.tb tbody td{height:22px;background:white;padding-left:3px;}.autocut {width:200px;overflow:hid...
＜td＞文字过长的部分变成省略号显示
青春不打烊的博客
09-02 783
首先设置表格的样式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..
table td文字超出显示省略号
YiZhiMei01的博客
06-28 4115
table { table-layout: fixed;} //必须，表格宽度不随文字增多而变长。 td { white-space: nowrap;overflow: hidden;text-overflow: ellipsis;} <body> <table> <thead> <th> 第一列 </th> &lt
html列表td的内容太长，多余的部分要用省略号显示，点击td可以显示全部内容
阿尔法小师妹
08-12 7807
目录 1.应用场景 2.代码样例 3.实现效果 1.应用场景 在显示展示列表的时候，有时会出现展示列表的列内容太长而使展示列表不美观。为此问题，设计列表的过长内容用省略号显示，并且点击td内容，可以显示全部内容。 2.代码样例 css代码样例： .table thead tr th, .table tbody tr td { vertical-align: ...
表格单元格内容超出时显示省略号效果(实现代码)
09-24
这里`.td`选择器针对表格中的所有单元格生效，这样，当单元格中的内容超过预设宽度时，就会在结尾显示省略号，而不是无限制地撑开单元格的宽度。 总结来说，通过设置`table-layout: fixed;`并合理利用`white-space`...
将td中文字过长的部分变成省略号显示的小技巧
09-25
要实现TD文字过长部分显示省略号的效果，我们首先需要设置表格的样式为`table-layout: fixed;`，这样表格的布局就是固定宽度的，不会因为内容的多少而改变每一列的宽度。然后，为TD元素设置一个固定的宽度，这是必须...
CSS超出文本指定宽度用省略号代替和文本不换行
09-24
本文将深入探讨如何使用CSS实现超出文本指定宽度用省略号代替以及禁止文本换行。 1. **一般文字截断** 当我们希望文本在特定宽度后被截断并用省略号表示时，可以使用以下CSS样式： ```css .text-overflow { ...
table中的td内容超出隐藏
chengjianghao的博客
08-24 2415
<table style="table-layout: fixed;width: XXX px"> <tr> <td style="white-space: nowrap;text-overflow: ellipsis;overflow: hidden;" ></td> </tr> </table> table标签需要设定属性 table-layout: fixed;width:.
antd Table表格超出部分隐藏并显示省略号，鼠标悬停时显示出td的所有内容
weixin_45738401的博客
05-25 1万+
antd Table表格超出部分隐藏并显示省略号，鼠标悬停时显示出td的所有内容 antd Table表格超出部分隐藏并显示省略号，鼠标悬停时显示出td的所有内容 文章目录antd Table表格超出部分隐藏并显示省略号，鼠标悬停时显示出td的所有内容前言一、设置td里面文本内容超出最大长度时隐藏超出部分并显示省略号二、给table中的td设置当鼠标悬停在上面时显示td的所有内容 前言 提示：以下是本篇文章正文内容，下面案例可供参考 一、设置td里面文本内容超出最大长度时隐藏超出部分并显示省略号 设置文本
table文字超出显示省略号
qq_46006194的博客
04-12 2631
tbale文字超出显示省略号 代码很简单，一个简单表格 设置表格的样式table-layout："fixed"再设置表格的宽度（这步必须） 设置文字过长部分需要用到text-overflow标签，设置为 ellipsis，意思为文本超出部分为省略号; 设置整体为本过长需要用white-space标签，设置为 nowrap，意思是文本不换行； 同时需要设置整体标签超出部分为不显示，设置方法为：overflow: hidden; 这样就ok了！ <!DOCTYPE html> <html
td内容过长，其他显示省略号
xiaoqing19910812的博客
03-21 3797
这个功能有一个前提，在table中必须设置style: table-layout: fixed; 这条属性就是让table的内部布局固定大小。这个时候就用width属性调节td的长度。 之后在添加如下： <style> td { white-space:nowrap; overflow:hidden; text-overflow: ellipsis;...
html表格td溢出显示省略号
qq_35469137的博客
11-07 1060
给td中的文字套了一个p标签，给p标签设置overflow:hidden;并且给p设置宽度 就可以解决以上问题。/* 只有定义了表格的布局算法为fixed，下面td的定义才能起作用。设置此属性之后td以50%和50%显示 */text-overflow:ellipsis;
【前端】td中内容过长，设置固定长度，其余部分用省略号显示
浪荡子爱自由的博客
07-13 2499
问题： 表格中显示的内容过长，导致表格变形。如果表格中有比较长的链接地址，即使设置了列宽，设置宽度会无效。 解决方法： table设置样式： table-layout: fixed; // table的内部布局固定大小 td设置样式： <style> td { white-space:nowrap; // 规定段落中的文本不进行换行 overflow:hidden; // 关闭滚动条 text-ov
td长度固定，内容过长，超过部分用省略号代替
热门推荐
CHEN的技术积累
07-05 3万+
html的table表格中td长度固定，当内容过长时，超过部分用省略号代替. 具体代码如下:
html table td超出内容自动隐藏，鼠标经过时显示
尤托匹亚的博客
02-16 1583
html table td超出内容自动隐藏，鼠标经过时显示。
css表格td文字超出部分用省略号表示
aq9527的博客
04-09 4330
table { table-layout: fixed;} //必须，表格宽度不随文字增多而变长。 td { white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}表格需设置宽度table-layout: fixed 由于table-layout的默认值是auto，即table的宽高将取决于其内容的多寡，如果内容的体积无法估测，...
html table设置的表格宽度 隐藏溢出内容显示省略号后如何点击表格显示全部信息
最新发布
02-19
<think>嗯，用户问的是如何在HTML表格中设置宽度，隐藏溢出内容并显示省略号，然后点击表格显示全部信息。这个问题看起来涉及CSS和JavaScript的应用。我需要先理清步骤。 首先，表格宽度设置和溢出隐藏。通常，表格单元格的文本过长会撑开单元格，影响布局。为了固定宽度并隐藏溢出，应该用CSS的text-overflow: ellipsis属性。但记得要配合white-space: nowrap和overflow: hidden。不过，表格单元格（td）默认是表格布局，可能不会自动处理溢出，所以可能需要设置table的布局为fixed，即table-layout: fixed。这样列宽会均匀分配或者根据设定的宽度来，否则text-overflow可能不生效。 然后，用户希望点击表格时显示全部信息。这里可能需要事件处理，当点击单元格时展开内容。不过，用户提到的是点击表格显示全部，可能是指整个表格，或者每个单元格？需要明确一下。假设是点击单元格，触发显示全部内容。 可能的步骤：1. 设置表格样式，让单元格内容溢出显示省略号。2. 给单元格添加点击事件，点击时取消溢出隐藏，显示全部内容。或者弹出一个提示框显示完整信息。 需要考虑的是，当内容被展开时，可能会影响表格布局，比如导致行高变化或者表格宽度变化。如果希望不改变布局，可能用tooltip或者模态框来显示全部内容会更合适。 另外，如何让单元格在点击时切换显示状态，可能需要用到JavaScript来动态修改样式。比如，点击后移除overflow: hidden和text-overflow，或者调整white-space属性。或者添加一个class，切换样式。 还有，用户可能希望点击单元格后显示全部，再次点击恢复省略。或者是一次点击展开，另一个区域点击收起。这部分需要交互设计。 可能的实现代码结构： CSS部分： 设置表格布局为fixed，td的max-width，overflow hidden，text-overflow ellipsis，white-space nowrap。 JavaScript部分： 给td添加click事件监听器，当点击时，改变其样式，比如取消white-space，允许换行，移除overflow，从而显示全部内容。或者使用title属性，在hover时显示提示，但点击的话可能需要更持久的显示方式。 不过，title属性的提示框不能通过点击触发，所以可能需要自定义的弹出层。比如，当点击单元格时，用JavaScript动态创建一个div，显示完整内容，并定位在单元格旁边。 或者，更简单的方法是，点击单元格时切换它的title属性，让提示显示，但这样可能不够直观，因为title通常是在hover时显示。 另一种方法是，在单元格被点击时，动态调整它的样式，比如将white-space改为normal，overflow变为visible，同时移除text-overflow。这样内容会自动换行，显示全部。但这样可能会改变行高，影响表格布局。 用户可能需要的是在有限的空间内显示省略，点击后可以查看完整内容，而不影响其他部分的布局。所以可能更好的方式是使用弹窗或者tooltip来展示全部内容。 总结步骤： 1. 设置表格样式，使用table-layout: fixed，td的宽度，overflow处理。 2. 使用CSS让文本溢出显示省略号。 3. 给每个td添加点击事件，触发显示完整内容。 4. 显示的方式可以是修改td的样式，或者弹出层。 现在需要考虑如何具体实现这些步骤，并提供示例代码。可能还需要处理多个单元格的情况，确保点击一个单元格时不影响其他单元格的状态，或者可以再次点击恢复原状。 另外，可能需要注意事件冒泡的问题，如果表格有其他点击事件的话，但这里可能不需要考虑。还要考虑移动端的兼容性，但用户没有特别说明，所以可能按一般情况处理。 最后，给出一个完整的示例代码，包括HTML、CSS和JavaScript部分，并解释每一部分的作用。确保代码简洁有效，用户可以直接复制使用并调整。在</think> HTML 表格中设置固定宽度并隐藏溢出内容显示省略号，同时支持点击单元格显示全部信息，可以通过以下步骤实现： --- ### 一、CSS 样式设置（固定宽度 + 省略号） ```html <style> table { table-layout: fixed; /* 关键：固定列宽算法 */ width: 100%; /* 根据需求调整整体宽度 */ } td { max-width: 200px; /* 控制单元格最大宽度 */ overflow: hidden; text-overflow: ellipsis; /* 溢出显示省略号 */ white-space: nowrap; /* 禁止换行 */ cursor: pointer; /* 鼠标指针变为手型 */ } </style> ``` --- ### 二、点击展开全部内容（JavaScript 交互） ```html <script> document.querySelectorAll('td').forEach(td => { td.addEventListener('click', function() { // 临时显示完整内容（通过弹窗或提示） const fullText = this.textContent; alert(fullText); // 简单粗暴的弹窗方式 // 或者动态创建悬浮层（更优雅） // showTooltip(fullText, this.getBoundingClientRect()); }); }); </script> ``` --- ### 三、完整代码示例 ```html <!DOCTYPE html> <html> <head> <style> table { table-layout: fixed; width: 300px; border-collapse: collapse; } td { border: 1px solid #ddd; padding: 8px; max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; } </style> </head> <body> <table> <tr> <td>这是一段非常长的文本内容，超出部分会被隐藏并显示省略号</td> <td>另一段超长的内容，测试点击展示效果</td> </tr> </table> <script> document.querySelectorAll('td').forEach(td => { td.addEventListener('click', function() { // 方案1：直接弹窗显示 alert(this.textContent); // 方案2：动态创建悬浮层（需自行实现定位逻辑） // const tooltip = document.createElement('div'); // tooltip.textContent = this.textContent; // tooltip.style.position = 'absolute'; // tooltip.style.background = '#fff'; // tooltip.style.border = '1px solid #000'; // document.body.appendChild(tooltip); // setTimeout(() => tooltip.remove(), 2000); }); }); </script> </body> </html> ``` --- ### 四、高级优化方案 1. **悬浮提示（Hover Tooltip）** 使用 `title` 属性实现鼠标悬停提示（无需点击）： ```html <td title="这里是完整内容">这里是部分内容...</td> ``` 2. **动态展开/折叠** 点击后直接展开单元格内容（修改 CSS）： ```javascript td.addEventListener('click', function() { this.style.whiteSpace = 'normal'; // 允许换行 this.style.overflow = 'visible'; }); ``` 3. **第三方库集成** 使用工具库如 **Popper.js** 实现精致的气泡提示框。 --- ### 五、关键点总结 | 步骤 | 作用 | |--| | `table-layout: fixed` | 强制表格按固定宽度分配列宽，使 `text-overflow` 生效 | | `text-overflow: ellipsis` | 文本溢出时显示省略号 | | `white-space: nowrap` | 禁止文本换行 | | 点击事件监听 | 通过 JavaScript 动态响应点击动作，灵活控制内容展示形式 | 根据实际需求选择最适合的交互方式！
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值