表格td内容过多时，td显示省略号，鼠标移入显示全部内容。

最新推荐文章于 2023-04-20 09:13:33 发布
最新推荐文章于 2023-04-20 09:13:33 发布
阅读量1.7w 收藏 5
点赞数 2
分类专栏： 功能实现 文章标签： 前端 表格td内容过多时 td显示省略号 鼠标移入显示全部内容1
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zhangyan8120399100/article/details/51659130
版权

两种方式显示：

1.title方式显示：
<!DOCTYPE html>  
<html>  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>  
<style type="text/css">  
.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:hidden;  
    white-space:nowrap;  
    text-overflow:ellipsis;  
    -o-text-overflow:ellipsis;  
    -icab-text-overflow: ellipsis;  
    -khtml-text-overflow: ellipsis;  
    -moz-text-overflow: ellipsis;  
    -webkit-text-overflow: ellipsis;  
}  
  
</style>  
</head>  
<body>  
 <table class="tb" border="0" cellpadding="1" cellspacing="1">  
    <thead>  
        <tr>  
            <th>Column1</th>  
            <th>Column2</th>  
            <th>Column3</th>  
        </tr>  
    </thead>  
    <tbody>  
        <tr>  
            <td>Column1</td>  
            <td width="200px;"><div class="autocut" title="放松的方式方法对所发生的放松的方式的方式">放松的方式方法对所发生的放松的方式的方式</div></td>  
            <td>Column3</td>  
        </tr>  
        <tr>  
            <td>Column1</td>  
            <td width="200px;"><div class="autocut" title="放松的方式方法对所发生的放松的方式的方式">放松的方式方法对所发生的放松的方式的方式</div></td>  
            <td>Column3</td>  
        </tr>  
        <tr>  
            <td>Column1</td>  
            <td width="200px;"><div class="autocut" title="放松的方式方法对所发生的放松的方式的方式">放松的方式方法对所发生的放松的方式的方式</div></td>  
            <td>Column3</td>  
        </tr>  
    </tbody>  
  </table>  
</body>  
</html>  




2.切换class属性方式：
<!DOCTYPE html>  
<html>  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title> 
<style type="text/css">
.li1 {
list-style:none;
width:100px;
white-space:nowrap;
text-overflow:ellipsis; 
-o-text-overflow:ellipsis; 
overflow: hidden;
margin-top:5px; 
}
 
.li2{
list-style:none;
margin-top:5px;
}
</style>
<script type="text/javascript"  src="jquery-1.11.3.js"></script> 
</head>  
<body> 
<ul>
<li class="li1" οnmοuseοver="this.className='li2'" οnmοuseοut="this.className='li1'"><a href="#">web标准常见问题大全web标准常见问题大全</a></li>
<li class="li1" οnmοuseοver="this.className='li2'" οnmοuseοut="this.className='li1'"><a href="#">尽快了解了解可怜快捷链接里看见快乐建立</a></li>
<li class="li1" οnmοuseοver="this.className='li2'" οnmοuseοut="this.className='li1'"><a href="#">和国际环境来看看窘境看见了开发机构了解了空间</a></li>
<li class="li1" οnmοuseοver="this.className='li2'" οnmοuseοut="this.className='li1'"><a href="#">发电股份的合格两款发动机和旅客看了解了空间</a></li>
<li class="li1" οnmοuseοver="this.className='li2'" οnmοuseοut="this.className='li1'"><a href="#">发电股份的高科技了发动机来看发给大家了发动机来看</a></li>
</ul>
</body>
</html>


一树菩提一烟霞
关注
  • 2
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
html td内容超出省略,table中td文字超出长度用省略号隐藏超出内容，鼠标点击内容全部显示...
weixin_33603963的博客
06-09 2508
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...
td超过的文字设置省略号
ChenYaJie
07-06 1993
加样式 text-overflow:ellipsis; -moz-text-overflow:ellipsis; overflow:hidden; white-space: nowrap; table再加上 table-layout:fixed; &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta...
html中对td标签内的过长字段进行省略号处理
whale的博客
01-09 504
（1） css样式： table { table-layout: fixed;} HTML中table代码： 序号 用户名 联系电话 操作 【对于bootstrap应该设置th的固定宽度】 设置td超过固定宽度自动显示为省略号： table tr td { overflow:hidden; white-space:nowrap; text-overflow:...
html列表td的内容太长，多余的部分要用省略号显示，点击td可以显示全部内容
阿尔法小师妹
08-12 7521
目录 1.应用场景 2.代码样例 3.实现效果 1.应用场景 在显示展示列表的时候，有时会出现展示列表的列内容太长而使展示列表不美观。为此问题，设计列表的过长内容用省略号显示，并且点击td内容，可以显示全部内容。 2.代码样例 css代码样例： .table thead tr th, .table tbody tr td { vertical-align: ...
前端页面实现输入文字过多时，超出部分用省略号显示
qq_39516866的博客
08-06 4117
.goods_name{         display: -webkit-box;         overflow: hidden;         white-space: normal !important;         text-overflow: ellipsis;         word-wrap: break-word;         -webkit-line-clamp:...
在td标签中文字超出显示省略号，鼠标悬停显示所有文本
weixin_43383479的博客
04-30 7517
在td标签中文字超出显示省略号，鼠标悬停显示所有文本 首先得在table的style中加入table-layout:fixed，让表格固定，然后用width设定表格的宽度。 然后表格中所有的列都一样宽了，这样肯定不好，所以要在tbody上加入<col style="width:10%">这个标签，有几列就加几个，这样就能调节宽度了 然后在td标签中加入如下的属性 <td styl...
ie6 表格td中无内容时不显示边框的解决办法
09-25
在Internet Explorer 6 (IE6) 浏览器中，一个常见的问题是在表格（table）的单元格（td）内如果没有内容，边框往往不会显示。这个问题会导致用户无法直观地识别表格结构，使得页面布局显得不清晰。以下是一些解决该...
Layer.js实现表格溢出内容省略号显示,悬停显示全部的方法
01-19
表格内容溢出省略号显示</title> <style type=text/css> .contain { font-family: ‘ Microsoft YaHei '; margin: 15px auto; width: 900px; } table { border: 1px solid #e3e6e8; border-...
bootstrap表格内容过长时用省略号表示的解决方法
12-29
首先 ，bootstrap中当td内容超过我给的固定宽度时，省略号代替的代码如下： 商品名称 详细介绍 购买数量 <tbody i
JQuery 控制内容长度超出规定长度显示省略号
10-25
主要介绍JQuery如何实现控制内容长度超出规定长度显示省略号,需要的朋友可以参考下
html表格字数显示,如何使table表格td中超出的文字以省略号显示
weixin_33055757的博客
05-30 2854
在现实开发中经常会遇到文字过长导致用户体验度不好的现象，所以我们常用到的解决方法就是使过长的文字隐藏显示省略号，鼠标滑过显示完整的文字，这样既解决了文字过长的问题，又使得用户体验更好。关键是纯css就能搞定，接下来就为小伙伴们介绍详细实现方法。我们在控制一个div里的内容很简单，设置div的宽度，利用white-space: nowrap;使内容不换行，而超出这个宽度的用overflow: hid...
＜td＞文字过长的部分变成省略号显示
青春不打烊的博客
09-02 712
首先设置表格的样式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..
datatable单元格内容过长显示省略号，单击弹出所有内容
ab17171313的博客
03-06 4767
设置datatable属性，其中targets是需要控制的列的数组，例如[0,1,2,3,5,7] "columnDefs": [ { "targets": targets, render: function (data, type, full, meta) { if...
点击表格中的编辑按钮，弹出一个窗口，同时将表格中的数据完整的弹出的页面中。（json传值）
momo牛的博客
09-30 4384
功能实现：点击表格中的编辑按钮，弹出一个窗口，同时将表格中的数据完整的传到新页面中。 1，创建一个编辑按钮（是在模板里面） <button type="button"class="layui-btn layui-btn-sm" onclick="update(this, {{type1.expressNum}})"><i class="layui-icon">&#xe66d;</i></button> <hr> 2，由这个点击按.
jsp页面table内容超长隐藏显示省略号，鼠标移入显示全部
weixin_38076674的博客
04-20 744
采购项目编号长度限制30个字符。
jsp 鼠标悬浮在td上展示td展示不完的内容
ZhengYanFeng1989的博客
06-08 2683
在实际开发中会遇到这样的情况，jsp采用table布局，但是td不能完全展示目标内容，导致td宽度外的文字以...省略号的形式展示。但是客户又想看到全部的内容。这时候只需要设置td的一些属性，就可以解决此问题。 &lt;td title="&lt;%=dt.getString(i, "DESCRIPTION") == null ? "" : dt.getString(i, "DESCRIPTION...
如何让html中的td文字只显示部分
渴望飞的鱼的博客
04-19 2452
可以直接这样写：for( var i=0;i&lt;team.makeup_newsList.length;i++){ var newsresult=team.makeup_newsList[i]; newstag+='&lt;div class="desc"&gt;'+ '&lt;div class="thumb"&gt;'+ ...
JSP超出字数显示省略号
weixin_40989555的博客
04-21 783
<style rel="stylesheet"> .ellipsis { max-width: 300px; /* 文本显示区域大小 */ overflow: hidden; /* 隐藏文字 */ text-overflow: ellipsis; w...
td中的文本省略问题
Youmoo的专栏
11-28 763
比如有如下table： 你好你好你好你好你好 你好你好你好 你好你好你好 你好你好你好 如果想让class="howto"的td只显示两个字符，多余的字以省略号代替，怎么做呢？ 我们可以添加以下css（注意：td中包裹数据的div是必须的）： div.hidden{ overflow: hidden; width: 4em;
table表格td内容过长不显示自动换行
最新发布
11-19
以下是两种解决table表格td内容过长不显示自动换行的方法： 1.使用CSS样式设置表格的宽度为固定宽度，然后设置单元格的word-wrap属性为break-word，这样单元格中的内容就会自动换行。 ```html <style> table { table-layout: fixed; width: 100%; } td { word-wrap: break-word; } </style> <table> <tr> <td>这是一个很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长的单元格内容</td> <td>这是一个短短短短短短短短短短短短短短短短短短短短短短短短的单元格内容</td> </tr> </table> ``` 2.使用CSS样式设置表格的宽度为自适应宽度，然后设置单元格的max-width属性为固定宽度，这样单元格中的内容就会自动换行。 ```html <style> table { width: auto; } td { max-width: 200px; word-wrap: break-word; } </style> <table> <tr> <td>这是一个很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长的单元格内容</td> <td>这是一个短短短短短短短短短短短短短短短短短短短短短短短的单元格内容</td> </tr> </table> ```

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值