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

1,设置css样式

<style>
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;
 }
</style>

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

<script>
$(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();
        });
    });
</script>

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

<table>
<tr>
<th>姓名</th>
<th>个性签名</th>
<th>性别</th>
</tr>
<tr>
<td>狗子</td>
<td>
<div class="MHover">嘻嘻嘻嘻嘻哈哈12345上山打老虎嘻嘻嘻嘻嘻哈哈</div>
<div class="MALL">嘻嘻嘻嘻嘻哈哈12345上山打老虎嘻嘻嘻嘻嘻哈哈</div>
</td>
<td>男</td>
</tr>
</table>

原文地址:https://www.cnblogs.com/cqj98k/p/11468736.html

时间: 2024-10-07 14:00:51

table中td文字超出长度用省略号隐藏超出内容,鼠标点击内容全部显示的相关文章

CSS3.0(0):text-overflow使用文字超多div的宽度或超过在table中&lt;td&gt;

关键字:text-overflow:ellipsis 语法:text-overflow:clip | ellipsis 取值 clip:默认值.不显示省略标记(...),而是简单的裁切. ellipsis: 当对象内文本溢出时显示省略标记(...). 可惜text-overflow 还只是ie的私有属性而已,也没被收录到w3c标准里. 如果想让某个容器(div或者li或者...块级元素)显示一行文字,当文字内容过多时,不换行,而是出现... 这样写:例如 1 <!DOCTYPE html PUB

关于Jquery获取Table中td内的内容

$(this).children().eq(1).text()获取的是显示的值$(this).children().eq(1).html()获取的是<td></td>之间的所有内容$('.trSelected',grid).find("td").eq(7).text();获取的是选中的某行的内容 遍历表<table id="gird"..... $("#grid tr").each(function() {     

如何让table中td宽度固定

table中td会随着里面的内容伸缩,设置其width样式并没有效果.这个时候需要下面的CSS可以实现. 首先是设置table .table {table-layout:fixed;} 其次是td .table  td { overflow: hidden; white-space: nowrap; text-overflow: ellipsis;} 如何让table中td宽度固定

当Table中td内容为空时,显示边框的办法

原文:当Table中td内容为空时,显示边框的办法 1111111111111 目录 定义和用法 实例 浏览器支持 可能的值 定义和用法 说明 实例 浏览器支持 可能的值 相关页面 1. 在 table的css里面加: border-collapse:collapse; 在 td 的css里面加:      empty-cells:show; 2 .最简单的就是 在TD里写个  说明: border-collapse设置或检索表格的行和单元格的边是合并在一起还是按照标准的HTML样式分开. 定义

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

首先设置 css样式: table { table-layout: fixed;} HTML中的table代码: <tr> <th class="col-md-1">用户ID</th> <th class="col-md-1">用户名</th> <th class="col-md-1">联系电话</th> <th class="col-md-1&q

css实现table中td单元格鼠标悬浮时显示更多内容

table中,td单元格无法显示下全部内容,需要在鼠标hover时显示全部内容. 正常显示样式: 鼠标hover时: html: <td>displayAddress<span class="tdtip">popAddress</span></td> css: td{ position:relative; z-index:2; } td:hover{ z-index:3; background:none; } td .tdtip { di

Table中td的长字符串换行处理

当需要在<table>中的<td>中显示一段很长的字符创时,如下句代码: Document.getElementById(<td>.id).innerText="XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX........" 可以在该table中增加 style="table-layout:fixed;word-break:break-all" 属性

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

table.ms-listviewtable { table-layout:fixed; width: 100%; } table.ms-listviewtable td[role="gridcell"]{ white-space:nowrap; text-overflow:ellipsis; -moz-text-overflow: ellipsis; overflow:hidden; }

table中td超出内容隐藏,鼠标悬停全部显示(完整版,含js代码)

一.CSS语法: text-overflow:clip | ellipsis 默认值:clip 适用于:所有元素 clip: 当对象内文本溢出时不显示省略标记(...),而是将溢出的部分裁切掉. ellipsis: 当对象内文本溢出时显示省略标记(...). 在使用的时候,有时候发现不会出现省略标记效果,经过测试发现,使用ellipsis的时候,必须配合overflow:hidden; white-space:nowrap; width:50%;这三个样式共同使用才会有效果 实例: table