How to restrict character limit by line or # of characters with css?

character-limit, css, layout, word-wrap

Solution

You can try `text-overflow`, however it has some restrictions, but still might suite you:

Example

<div id="container">
    This is some short content to demonstrate the css-property
    text-overflow
</div>​

#container{
    width:100px;
    height:50px;
    border:1px solid red;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space: nowrap;   
}​

Problem

Is there a css property that can do one of the following? But first, let me explain. Imagine a masonry layout where each item is width: 200px; and each would be height: 250px; (this is just an example). In each item, there is a thumbnail and a link, and often times, this link wraps to 2-3 lines, and therefore makes the height of each item different. Is there a way I can set a maximum # of characters within a class, or cut off wrapping after a certain # of lines? And perhaps even add some css effect to insert content: "..."; before the line end to show that it was cut off? Any help is appreciated. Thank you.

Original source