如果div高度达到固定高度,如何添加一个类？

Question

我的项目中有一些动态生成的模块.这个基本的HTML将作为我想要实现的目标的一个例子:

<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>

我的问题是,我不希望这个模块在垂直方向上增长过多,如果网络管理员写了一个很长的"描述"(我不能限制他想写多少,因为"描述"文本会显示在其他页).

我发现了一个很好的CSS技巧,可以将"省略号"添加到多行容器中.在这里你可以看到这个"技巧" .ellipsis(加上基本的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; 
}   

你可以在这里看到所有东西:JSFIDDLE

我的问题是,虽然省略号工作正常,但我不希望所有模块都有一个固定的高度.我只想将max-height限制为固定大小.(只需从".ellipsis:before"中删除"height:200px;",看看我想要实现的目标.)

所以,问题是.ellipsis:before固定的高度.除非我将位置转为绝对值,否则100%高度将无效,但是"省略号"技巧将无效,因为浮点数不会生效.

任何有关我的问题的帮助将不胜感激.我不认为可能有一个纯CSS解决方案,(相信我,我已经尝试过),而且我非常糟糕的JavaScript/jQuery.但是,如果你有一个可能有帮助的jQuery解决方案,我可以在项目中实现它(并在这里给你很好的代表:)).我想的是:

如果div.ellipsis> 200px然后将高度:200px添加到省略号:之前

非常感谢,请原谅我可怜的英语.希望这个问题足够清楚.

Answer 1

不需要:before伪类.检查这个小提琴.

.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 */
}

工作小提琴

在上面的小提琴中,我删除了:before伪类,并将伪类的位置设置:after为top,200px其等于给定的max-height值.ellipsis.

并删除容器的默认上下间隙,我添加了margin-top: -25px等于给定的line-height.

注意:您可以只应用top: 175px给定值max-height和line-height值的减法结果值.

Answer 2

这是一个简单的jQuery解决方案.

首先在ellipsis达到最大高度时添加一个类,让我们调用它maxed.将其:before高度设置为200px:

.ellipsis.maxed:before {
    height:200px;
}

然后如你所说.你可以做一些简单的jQuery来检查高度.如果它是最大值,那么将我们的maxed类添加到ellipsis:

$(function() {
    $('.container .ellipsis').each(function() {
        var $this = $(this);
        if($this.height() >= 200) {
            $this.addClass('maxed');
        }
    });
});

这里更新了小提琴