javascript - JQuery mousehover text on table td? - Stack Overflow

admin管理员组

文章数量:1356214

I am using JQuery and Html table.

I have table columns with fixed width. But i dont want the text to wrap to next line or enlarge the table when td text exceeds the width.

Is it possible to display td value on hover of the mouse when text length is more than the td width?

If td value is as below:

abbcccccccccccccccccccccccccccccccccccccccccccccccccccc

then i have to display only:

abccccc......

and on mouse over i have to display entire text:

abbcccccccccccccccccccccccccccccccccccccccccccccccccccc

IS it possible? Please suggest me.

How can i calculate whether text length is exceeding the td length ?

Thanks!

I am using JQuery and Html table.

I have table columns with fixed width. But i dont want the text to wrap to next line or enlarge the table when td text exceeds the width.

Is it possible to display td value on hover of the mouse when text length is more than the td width?

If td value is as below:

abbcccccccccccccccccccccccccccccccccccccccccccccccccccc

then i have to display only:

abccccc......

and on mouse over i have to display entire text:

abbcccccccccccccccccccccccccccccccccccccccccccccccccccc

IS it possible? Please suggest me.

How can i calculate whether text length is exceeding the td length ?

Thanks!

• javascript
• jquery
• html
• css

Share Improve this question Follow edited Mar 26, 2014 at 6:44 user755806 asked Mar 26, 2014 at 6:35 user755806user755806 6,8352727 gold badges111111 silver badges158158 bronze badges 4

• 2 Yes possible. What have you tried so far??? – Milind Anantwar Commented Mar 26, 2014 at 6:35
• 1 Milind, am new to Jquery stuff...Please give me some idea.. – user755806 Commented Mar 26, 2014 at 6:36
• first learn by going learn.jquery. – Bhojendra Rauniyar Commented Mar 26, 2014 at 6:41
• I know Jquery basics..want to know the approach to calculate whether text width is exceeding the td width... – user755806 Commented Mar 26, 2014 at 6:43

Add a ment  | 

6 Answers 6

Sorted by: Reset to default 3

Try this,

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

Updated for Table,

HTML

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

CSS Change

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

Table demo

A jQuery solution, with the benefit that you can limit the exact number of characters displayed, in CSS you can't. If you don't want to damage your table structure, use a tooltip:

Link these files first:

<link rel="stylesheet" href="http://code.jquery./ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery./jquery-1.9.1.js"></script>
<script src="http://code.jquery./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) + "...";        
}

It is possible with jquery checkout this -> https://jqueryui./tooltip/

Not sure on the exact condition, but you can use the CSS and addClass/removeClass as below:

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

consider this example: http://jsfiddle/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%;}

It seems like it may be possible with CSS only, provided you are willing to set some column widths fixed.

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

Play around with this JSFiddle to adjust for your padding / widths etc:

https://jsfiddle/d233dbz7/

本文标签： javascriptJQuery mousehover text on table tdStack Overflow