Javascript 表td上的JQuery鼠标悬停文本？

我正在使用JQuery和Html表

我有固定宽度的表列。但是我不希望文本换行到下一行，或者在td文本超过宽度时放大表格

当文本长度大于td宽度时，是否可以在鼠标悬停时显示td值

如果td值如下所示：

abbcccccccccccccccccccccccccccccccccccccccccccccccccccc

那么我只需要显示：

abccccc......

鼠标悬停时，我必须显示整个文本：

abbcccccccccccccccccccccccccccccccccccccccccccccccccccc

可能吗？请推荐我

如何计算文本长度是否超过td长度

---

谢谢

使用jquery checkout可以查看此->

不确定具体条件，但您可以使用CSS和addClass/removeClass，如下所示：

abbcccccccccccccccccccccccccccccccccccccccccccccccccccc

HTML:

CSS:

试试这个

HTML

<span class='more'>abbcccccccccccccccccccccccccccccccccccccccccccccccccccc</span>

<table>
    <tr>
        <td style="max-width:100px">
           <span class='more'>abbcccccccccccccccccccccccccccccccccccccccc</span>
        </td>
    </tr>
</table>

<table id="data_container" border="1">
  <tr>
    <td><span>asdfadsfadsfasdfasdfasdfasdfasdfsadfasdf</span></td>
    <td><span>kljkjlhklhlkhklhkhasdfasdfasdfadsfasdfas</span></td>
  </tr>
</table>

更新了

表格的

HTML

<span class='more'>abbcccccccccccccccccccccccccccccccccccccccccccccccccccc</span>

<table>
    <tr>
        <td style="max-width:100px">
           <span class='more'>abbcccccccccccccccccccccccccccccccccccccccc</span>
        </td>
    </tr>
</table>

<table id="data_container" border="1">
  <tr>
    <td><span>asdfadsfadsfasdfasdfasdfasdfasdfsadfasdf</span></td>
    <td><span>kljkjlhklhlkhklhkhasdfasdfasdfadsfasdfas</span></td>
  </tr>
</table>

考虑一下这个例子：

HTML

<span class='more'>abbcccccccccccccccccccccccccccccccccccccccccccccccccccc</span>

<table>
    <tr>
        <td style="max-width:100px">
           <span class='more'>abbcccccccccccccccccccccccccccccccccccccccc</span>
        </td>
    </tr>
</table>

<table id="data_container" border="1">
  <tr>
    <td><span>asdfadsfadsfasdfasdfasdfasdfasdfsadfasdf</span></td>
    <td><span>kljkjlhklhlkhklhkhasdfasdfasdfadsfasdfas</span></td>
  </tr>
</table>

CSS

span{
  max-width: 100%;
  height: 100%;
  display: block;
  overflow: hidden;
  margin-right: 10px;
  position:relative;
}
#data_container td{width: 50%;}

jQuery解决方案，其优点是可以限制显示的确切字符数，而在CSS中则不能。如果不想损坏表结构，请使用：

首先链接这些文件：

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

$("td").each(function(){
    var val = $(this).text();

    if(val.length > 8){
        $(this).attr("title", val);
        $(this).text(  clip( $(this).text() ) );
    }
});

// once the attributes have been set, execute the tootip:

$(document).tooltip();

// helper method
function clip(string){        
    return string.substr(0, 8) + "...";        
}


$（“td”）。每个（函数（）{
var val=$（this.text（）；
如果（值长度>8）{
$（this.attr（“title”，val）；
$（this.text）（剪辑（$（this.text（）））；
}
});
//设置属性后，执行tootip：
$（document.tooltip（）；
//辅助方法
函数剪辑（字符串）{
返回字符串。substr（0，8）+“…”；
}
如果您愿意将某些列宽设置为固定的，那么似乎只使用CSS是可能的

HTML:

使用此JSFIDLE调整填充/宽度等：

可能是。到目前为止你尝试了什么？？？Milind，我是Jquery新手…请给我一些想法..首先边走边学我知道Jquery的基本知识..想知道计算文本宽度是否超过td宽度的方法…Jos，谢谢你的回答。如何计算文本长度是否超过td长度？您可以创建一个包含文本的html对象，并使用jquery获得thatRohan的宽度，非常感谢您的回答。当鼠标移到上面时，显示整个文本时，它会改变表格结构吗？如果你修改
列宽
，那么它不会改变你的
表格结构
。jogesh，鼠标移到上面时，它正在改变表格结构…我不想这样做。非常感谢你的回答。@user755806现在它已修复，检查fiddle@jogesh_pi如果桌子窄一点怎么办@Gaurangtand如果此线程的任何解决方案不适用于窄表数据，OP必须从
中溢出它，如果他想修复宽度。@jogesh_pi可以使用工具提示。Gaurang，非常感谢您的回答。在鼠标上方展开列，该列的表结构将被更改，而表结构不应被更改。然后，您可以轻松地使用显示溢出的文本。这样，您可以从my code
$（“td”）中删除第二个函数。悬停
，并在每个
td
属性的长度超过时动态添加
title
属性。我正在编辑我的答案。基本上，工具提示与在元素上放置标题属性时得到的效果类似，它不会损坏DOM的结构。
table {
  width: 100%;
  border-collapse: collapse;
}
table td,
table th {
  border: 1px solid black;
}
th {
  text-align: left;
  background: black;
  color: white;
}
td.one {
  vertical-align: top;
  width: 150px;
  max-width: 150px;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
td.one:hover {
  overflow: visible;
}
td.one:hover span {
  min-width: 130px;
  position: absolute;
  display: block;
  background-color: red;
  padding: 0px 20px 0px 0px;
}
td.two {
  width: auto;
}