单击时使用“显示：表格单元格”展开 div？

Question

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

• 我希望他们都至少是 150px 高。
• 如果他们不是 150px 高，我想将他们的文本垂直居中。
• 如果超过150px我想截掉150px的文字 如果需要，可以使用 显示更多 按钮将其展开。

现在，第一种情况，他们不是150px tall 工作正常，文本居中。问题是我无法获取带有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";
}

Answer 2

尝试 css 样式word-wrap:ellipsis。它会工作