javascript - 单击时用 "display: table-cell"展开 div？

Question

我的页面上有一系列组件:

• 我希望他们都至少有 150px 高。
• 如果它们不是 150px 高，我想将它们的文本垂直居中。
• 如果它们超过 150px 我想在 150px 处 chop 文本 并根据需要使用显示更多按钮将其展开。

现在，第一种情况，他们不是 150px 高的情况下工作正常，文本居中。问题是我无法获取 height > 150px 的组件来切断它们的内容。

我想在没有 jQuery 的情况下做到这一点。

Here is a codepen demonstrating the issue.

HTML:

  <div class="containerDiv">
<div id="content1" class="contentDiv">
  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
  <br />
  <button class="showMoreButton" onclick="showMore()">Show More</button>
</div>
</div>
<br />
<div class="containerDiv">
  <div id="content2" class="contentDiv">
  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
  <br />
    <button class="showMoreButton" onclick="showMore()">Show More</button>
  </div>
  <br />
</div>

CSS:

.containerDiv {
  display: table;
  min-height: 150px;
  width: 400px;
}
.contentDiv {
  display: table-cell;
  max-height: 150px;
  overflow: hidden;
  vertical-align: middle;
}
.showMoreButton {
  display: none;
}

JS:

var contentDivs = document.getElementsByClassName("contentDiv");
for(var i = 0; i < contentDivs.length; i++) {
  if(contentDivs[i].offsetHeight > 150) {
    contentDivs[i].getElementsByTagName("button")[0].style.display = "inline-block";
  }
}

function showMore() {
  console.log(event.path[1].id);
  document.getElementById(event.path[1].id).style.maxHeight = "none";
}

Answer 1

好的，我知道你是can't set a max-height for an element displayed as a table cell

因此，我将我的文本包装在一个 div 中，在那里设置了所有 max-height 和 overflow 属性，并且效果很好。

Here is an updated codepen

HTML:

  <div class="containerDiv">
<div id="content1" class="contentDiv">
  <div class="content">
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
    <button class="showMoreButton" onclick="showMore()">Show More</button>
  </div>
  <br />

</div>
</div>
<br />
<div class="containerDiv">
  <div id="content2" class="contentDiv">
    <div class="content">
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
  </div>
  <br />
  <button class="showMoreButton" onclick="showMore()">Show More</button>
</div>
<br />
</div>

CSS:

    .containerDiv {
      display: table;
      min-height: 150px;
      overflow: hidden;
      width: 400px;
    }
    .contentDiv {
      display: table-cell;
      vertical-align: middle;
    }
    .content {
      max-height: 150px;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .showMoreButton {
      display: none;
    }

JS:

var contentDivs = document.getElementsByClassName("contentDiv");
for(var i = 0; i < contentDivs.length; i++) {
  if(contentDivs[i].offsetHeight > 150) {
    contentDivs[i].getElementsByTagName("button")[0].style.display = "inline-block";
  }
}

function showMore() {  
 document.getElementById(event.path[1].id).getElementsByClassName("content")[0].style.maxHeight = "none";
}