3

I have a textfield in a grid in which I wish to turn off text wrapping, but display a tooltip with the full text if wrapping is required. So, how could I detect if a field needs to wrap?

I tried to query the field's length, but it was either in em or in px based on if the user resized it. How could I get the wrapping status?

pimvdb
  • 151,816
  • 78
  • 307
  • 352
Saurabh
  • 451
  • 2
  • 4
  • 18

2 Answers2

3

An option to detect if the text wraps - create (with jQuery, for instance) an invisible span with the same font settings and white-space: nowrap, set it's text to the field's content and check if the span's width is bigger than the field's width (in pixels, obtained via width())

Working fiddle: http://jsfiddle.net/TR98y/1/

Guard
  • 6,816
  • 4
  • 38
  • 58
  • The fiddle updated to reflect your exact scenario - having an overflow on the textarea and setting the title – Guard Oct 04 '11 at 17:35
  • Oh, yes! It works for me! I was able to adapt your suggestion to suit my needs. Many thanks! – Saurabh Oct 11 '11 at 05:13
0

Perhaps you can check the height (via scrollHeight) of the text container. It should increase when things start wrapping.

The only other alternative I can think of is setting overflow-x:hidden and then dettecting the overflow somehow.

hugomg
  • 68,213
  • 24
  • 160
  • 246