Question

我正在使用JQuery和Html表。

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

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

如果td值如下：

abbcccccccccccccccccccccccccccccccccccccccccccccccccccc

然后我只需要显示：

abccccc......

鼠标悬停在i上我必须显示整个文字：

abbcccccccccccccccccccccccccccccccccccccccccccccccccccc

有可能吗？请建议我。

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

谢谢！

Answer 1

试试这个，

<强> HTML

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

<强> CSS

.more{
    display:inline-block;
    width: 50px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.more:hover{
    white-space:initial;
    cursor:pointer;
    width:100%;
}

Demo

已更新 Table，

<强> HTML

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

CSS 更改

.more:hover{
    white-space:initial;
    cursor:pointer;
    width:100%;
    word-wrap:break-word;
}

Table demo

Answer 2

一个jQuery解决方案，有一个好处，你可以限制显示的确切字符数，在CSS中你不能。如果您不想损坏表结构，请使用tooltip：

首先链接这些文件：

<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) + "...";        
}

Answer 3

可以使用jquery checkout这个 - ＆gt; https://jqueryui.com/tooltip/

Answer 4

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

HTML：

<div id="mydiv">
    <span id="short" class="show"> gcccc...</span>
    <span id="full" class="hidden"> gcccccccccccccccccc </span>
</div>

JS：

$('#mydiv').on('mouseover', function(){
    $(this).find('#full').removeClass('hidden');
    $(this).find('#short').addClass('hidden');
});

$('#mydiv').on('mouseout', function(){
    $(this).find('#short').removeClass('hidden');
    $(this).find('#full').addClass('hidden');
});

CSS：

.hidden{
    display: none;
}

JSfiddle

Answer 5

考虑这个例子：http://jsfiddle.net/jogesh_pi/ueLha/

<强> HTML

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

<强> JS

$('#data_container td').each(function(){
    $(this).find('span').width(20);
});

$('#data_container td').hover(
    function(){
        $(this).find('span').css('width', '100%');
    }, 
    function(){
        $(this).find('span').css('width', '20px');
    }
);

CSS

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

Answer 6

如果您愿意设置一些固定的列宽，似乎只能使用CSS。

HTML：

<table>
  <tr>
    <th class='one'>Column One</th>
    <th class='two'>Column 2</th>
  </tr>
  <tr>
    <td class='one'><span>Very long text which just goes on and on and on and on and ends.</span></td>
    <td class='two'>Epsilon Phi Ignatius Useful Strong Epsilon</td>
  </tr>
  <tr>
    <td class='one'><span>1</span></td>
    <td class='two'>2</td>
  </tr>
</table>

CSS：

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

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

https://jsfiddle.net/d233dbz7/

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

6 个答案: