Clamp.js icon indicating copy to clipboard operation
Clamp.js copied to clipboard

Fixed problem with non-integer line height

Open t-schroeder opened this issue 6 years ago • 0 comments

This library couldn't handle non-integer line heights.

E.g. if you want to clamp a text at two lines and the line height is 22.5px the code would parseInt that to 22. Multiplied by two that's a max height of 44px. However, the browser displays two lines with height 45px. 45 > 44, so another line would be clamped so that only one line is left.

Solution: Replaced some parseInt calls with parseFloat.

Another problem: Say you have a line height of 20.89px and you want to clamp at two lines again. Now multiplied by two that makes a max height of 41.78px. However, the browser reports the two lines of text as height 42px. Since 42 > 41.78 another line would be clamped again so that only one line is left.

Solution: Math.ceil the max height.

t-schroeder avatar Sep 10 '18 16:09 t-schroeder