Javascript 如果一个元素高于某个高度，则显示该元素

我有以下HTML：

<span class="day-number">{{day-number}}</span>
<div class="event-box">
  <div class="event-container">
  </div>
  <div class="more-events">more ...</div>
</div>

我想根据

.event container

的高度是否超过

76px

（等于堆叠的四个

.event

元素的高度）显示或隐藏

.more

元素

上述元素的样式：

.event {
    text-align: left;
    font-size: .85em;
    line-height: 1.3;
    border-radius: 3px;
    border: 1px solid #3a87ad;
    background-color: #3a87ad;
    font-weight: normal;
    color: whitesmoke;
    padding: 0 1px;
    overflow: hidden;
    margin-bottom: 2px;
    cursor: pointer;
}
.event-box {
    max-height: 76px;
    overflow: hidden;
    position:relative;
}
.event-box .more-events {
    height: 10px;
    position: absolute;
    right: 0;
    bottom: 10px;
    display: none;
    z-index: 5;
}

没有

事件容器的样式设置

我可以用Javascript（jQuery）做我想做的事情：

每次做更改时都运行它，但我更愿意使用CSS

这可能吗？可能是伪元素或媒体查询之类的

JSFIDDLE:
我认为只使用css是不可能的。但是为了更好地处理您正在尝试执行的操作。我没有为
使用
最大高度
。事件框
使用此css，它是添加
显示：无
到+4。事件容器上的事件：

.event-box .event-container .event:nth-child(n+5){
    display: none;
}

现在，当超过4时，将显示更多文本

更新：

我也对你的js做了一些小改动，使它更专业，
当你使用模板来呈现页面时，也许你可以按照下面的方法来做

<div class="event-container">
{{#each events}}
  <div class="event">{{event-name}}</div>
{{/each}}
</div>
{{#if canshowmore}}
<div class="more-events">more ...</div>
{{/if}}

如果更改标记是可以接受的，那么就有可能在不使用
JavaScript
显示或隐藏页面的情况下获得外观类似的页面，下面是

我删除了
more…
行，并在必要时隐藏了
event
类的元素，我还使它们在悬停在
more…
上时显示出来

我添加的CSS：

.event:nth-child(n){
    display: none;
}
.event:nth-child(1),.event:nth-child(2),.event:nth-child(3),.event:nth-child(4){
    display: block;
}
.event:nth-child(5){
    text-indent: -9999px; 
    position: relative;
    display: block;
    color: black;
    border: none;
    background-color: #FFF;
}
.event:nth-child(5)::before{
    position: absolute;    
    text-indent: 0px; 
    content: "more ...";
    display: block;
}
.event:nth-child(5):hover{
    position: static;
    text-indent: 0; 
    border: 1px solid #3a87ad;
    background-color: #3a87ad;
    color: whitesmoke;        
}
.event:nth-child(5):hover::before{
    display:none;
}
.event:nth-child(5):hover ~ .event:nth-child(n){
    display: block;
}

对于
.event box
类，我已注释掉
最大高度：76px.event
元素堆叠的高度。还删除了
update
函数。
我没有使用模板，而是使用JavaScript呈现整个页面。在第4行，添加
eventcount=4。或者像这样做：
<div class="event-container">
{{#each events}}
  <div class="event">{{event-name}}</div>
{{/each}}
</div>
{{#if canshowmore}}
<div class="more-events">more ...</div>
{{/if}}

function canshowmore() {
  return events.length >= 4;
}

.event:nth-child(n){
    display: none;
}
.event:nth-child(1),.event:nth-child(2),.event:nth-child(3),.event:nth-child(4){
    display: block;
}
.event:nth-child(5){
    text-indent: -9999px; 
    position: relative;
    display: block;
    color: black;
    border: none;
    background-color: #FFF;
}
.event:nth-child(5)::before{
    position: absolute;    
    text-indent: 0px; 
    content: "more ...";
    display: block;
}
.event:nth-child(5):hover{
    position: static;
    text-indent: 0; 
    border: 1px solid #3a87ad;
    background-color: #3a87ad;
    color: whitesmoke;        
}
.event:nth-child(5):hover::before{
    display:none;
}
.event:nth-child(5):hover ~ .event:nth-child(n){
    display: block;
}