search

rviscomi / trunk8

jQuery Truncation Plugin -- THIS PROJECT IS NO LONGER MAINTAINED
MIT License
703 stars 95 forks source link

broken with line-height in ems #2

Closed fuxter closed 12 years ago

fuxter commented 12 years ago

if the element has line-height in ems, ex. { line-height: 1.5em; } it's just gets emptied on $.trunk8'ing.

gilmoreorless commented 12 years ago

This also happens when using unitless line-heights - which are better anyway ;)

rviscomi commented 12 years ago

This is an interesting problem. I'm working on a bug fix that involves wrapping the element in a div, setting the element's text to a thin character like "i", measuring the wrapper div's inner height, then unwrapping the element and resetting its text.

Because of the DOM manipulations it's not particularly fast, but this appears to be the most reliable way to measure the line height of the text block in pixels.

Thoughts? Other ideas?

gilmoreorless commented 12 years ago

As a quick fix I tried a simple regex on the calculated line-height, which detected non-px values as used them as a multiplier of the font size. It worked well enough for my simple use case, but I noticed it miscalculated the number of lines in IE (so I specified 8 lines but the text was truncated at 7).

rviscomi commented 12 years ago

@gilmoreorless that's a nice alternative. The decision tree for each line-height unit could get a little messy though: ems, pixels, points, and unitless. Not sure how well points can be converted into pixels.

I've committed the fix I had mentioned earlier, let me know if it works as well as your quick fix.

(Fixed in 1.2)

gilmoreorless commented 12 years ago

Thanks, I'll test it out. Like I said, my solution worked for my simple case, but that's mainly because I ignored points completely ;)