show some content of readme if is too long

[lyndaidaii]

Summary of the changes (in less than 80 characters):

we are using clamp.js to cut off the html element. Here we are going to increase the number of lines to cut off.

clamp(): this controls where and when to clamp the text of an element.

useNativeClamp (Boolean). Enables or disables using the native -webkit-line-clamp in a supported browser (ie. Webkit). It defaults to true if you're using Webkit, but it can behave wonky sometimes so you can set it to false to use the JavaScript- based solution.

            var height = getMaxHeight(clampValue);
            if (height <= element.clientHeight) {
                clampedText = truncate(getLastChild(element), height);
            }

before:

after :

Addresses #8564

[joelverhagen]

In your screenshot it seems that the current behavior looks more like 0 or 1 lines. Does line count 10 not have the effect that we are expecting?

[lyndaidaii]

In your screenshot it seems that the current behavior looks more like 0 or 1 lines. Does line count 10 not have the effect that we are expecting?

increase the number from 10 to 30, it will increase the chunk height(number line we define * line height)
if chunk height is less then one html element height, it will show ... . when value is 10, the cut off height is less than html element height, so that it show '...' instead, in this readme, the image height larger than height of 10 lines.

If I remove the image and badge on readme above. then it will show the number of lines:

[loic-sharma]

@joelverhagen FYI our plan is to display the entire readme once we move to a tabbed design. In other words, we don't need to get the clamping behavior 100% right given this problem will disappear soon enough :)