setting overflow css property from javascript

Question

I have a cell in the table with inner div:

<td class="source">
  <div class="overflow">
    <a href...>...</a>
  </div>
</td>

Initially I want to have:

td .overflow {      
overflow: hidden;       
text-overflow: ellipsis;
}

then in javascript mouseenter handler for the element:

$(this).parents('td').css('overflow', 'visible').css('text-overflow', 'visible')

but it doesn't work! nothing happens on hover... why? When I reverse the code and make the overflow visible at the start then hover does hide it .

thank you

What is $(this) in your code? What, and where, are the constraints on the size of the div/td that results in it/their having an overflow? — David Thomas
– David Thomas, Commented Oct 23, 2013 at 17:54

Niels · Accepted Answer · 2013-10-23 18:29:36Z

1

You are searching for all parents TD, not the .overflow element. Try this:

$(this).closest('.overflow').css({
    overflow: 'visible',
    textOverflow : 'visible'
});

Setting overflow on TD does not work in all browsers as expected.

answered Oct 23, 2013 at 17:57

Niels

50.1k4 gold badges68 silver badges86 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

you should use the object form textObject instead of text-object, for both consistency and performance reasons.

thank you for this.. it was obviously a stupid mistake... I have to do this on 'overflow' div, not TD... thanx again!