How to add a class if div height reaches a fixed height?

Question

I have some modules on my project that are generated dynamically. This basic HTML will work fine as an example of what I want to achieve:

<div class="container">
    <div class="image">  
        image here
    </div>
    <div class=" ellipsis">                            
        <div class="description">
            here we have a text not very long for a small module
        </div> 
    </div>
    <div class="end">
        buttom
    </div>                                              
</div>

My problem is that I don't want this module to ever grow too much vertically, if the web administrator writes a long "description" (I can't limit how much he wants to write as the "description" text will show on other pages).

I found a nice CSS trick to add "ellipsis" to a multiple lines container. Here you can see this "trick" in the .ellipsis (plus the basic CSS):

.container {
    background-color: #eee;
    width:100px;
    margin:20px;
    float:left;    
}
.image {
    border:2px solid #999;
    width:100px;
    height:60px;
    background-color: #fff;
    margin-bottom:10px;
}
.end {
    border:2px solid #999;
    width:100px;    
    background-color: #fff;
}

.ellipsis {
    overflow: hidden;
    max-height: 200px;
    line-height: 25px;
    margin-bottom:10px; 
    position:relative;
}

.ellipsis:before {
    content:"";
    float: left;
    height:100%;
    width: 5px; 
    height: 200px; 
}

.ellipsis > *:first-child {
    float: right;
    width: 100%;
    margin-left: -5px; 
}       

.ellipsis:after {
    content: "\02026";
    box-sizing: content-box;
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    float: right; position: relative;
    top: -25px; left: 100%; 
    width: 20px; margin-left: -20px;
    padding-right: 5px;
    text-align: right;
    background-color:#eee; 
}   

You can see everything together here: JSFIDDLE

The problem I have is that while ellipsis works fine, I don't want ALL the modules to have a fixed height. I just want to limit the max-height to a fixed size. (Just delete "height: 200px;" from ".ellipsis:before" to see what I want to achieve.)

So, the problem is the .ellipsis:before fixed height. 100% height won't work unless I turn the position to absolute, but then the "ellipsis" trick won't work as the float won't take effect.

Any help with my problem will be greatly appreciated. I don't think there may be a pure CSS solution, (trust me, I have tried) and I'm very bad a JavaScript/jQuery. However, if you have a jQuery solution that may help, I could implement it in the project (and give you nice rep points here :) ). I was thinking something like:

If div.ellipsis > 200px then add height:200px to ellipsis:before

Thanks a lot in advance and please excuse my poor English. Hope the question is clear enough.

Answer 1

There is no need of :before pseudo class. Check this fiddle.

.ellipsis:after {
    content:"\02026";
    position: absolute;   /* removed position: relative */
    top: 200px;           /* equal to max-height value */
    right: 0px;
    margin-top: -25px;    /* equal to line-height value */
    /* other styles */    /* removed float property */
}

Working Fiddle

In the above fiddle, I removed :before pseudo class and set the position of the :after pseudo class to top by 200px which is equal to the given max-height value of the .ellipsis.

and to remove the default upper and lower gaps of the container, I added margin-top: -25px which is equal to the given line-height.

Note: You can apply just top: 175px which is result value of subtraction of given max-height and line-height values.