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＆gt; 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 */
}

<强> Working Fiddle

在上面的小提示中，我删除了:before伪类，并将:after伪类的位置设置为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');
        }
    });
});

Updated fiddle here

Answer 3

你可以使用jquery轻松完成（我假设jquery是你项目中的一个可用选项）。

你必须

删除所有＆＃34;省略号＆＃34;来自HTML的课程
添加＆＃34;省略号＆＃34;需要时使用JS（=当你的内容超过200px时）。

为此，您可以使用以下内容：

    $('.description').each(function(){
        if($(this).height() >= 200 ){
            $(this).parent().addClass('ellipsis');
        }
    });

Working JSfiddle

Answer 4

你不能直接操作像以前那样的伪元素。你可以在这里做的是为height: 200px添加一个用于大省略号的类。然后使用jQuery根据高度添加新类。

$(function() {
  $('div.ellipsis').each(function (index, element) {
    if ($(element).height() >= 200) {
      $(element).addClass('ellipsis-large');
    }
  });
});

请参阅完整示例的代码段：

$(function() {
  $('div.ellipsis').each(function(index, element) {
    if ($(element).height() >= 200) {
      $(element).addClass('ellipsis-large');
    }
  });
});

.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 class for small modules */

.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;
}
/* ellipsis class for large modules */

.ellipsis-large:before {
  height: 200px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>
<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>
<div class="container">
  <div class="image">
    image here
  </div>
  <div class="ellipsis">
    <div class="description">and here we have a much longer text to reach the 200px "ellipsis" div to activate the effect made with pure css. a nice discovery from http://www.mobify.com/blog/multiline-ellipsis-in-pure-css/
    </div>
  </div>
  <div class="end">
    buttom
  </div>

</div>

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

4 个答案: