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

Question

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

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

现在，第一种情况，它们不是150px高，效果很好，文本居中。 问题是我无法让height > 150px组件切断它们的内容。

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

这是一个演示该问题的代码笔。

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

好的，我发现您无法为显示为表格单元格的元素设置最大高度

因此，我将文本包裹在div ，在那里设置所有max-height和overflow属性，效果很好。

这是一个更新的代码笔

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 。 它会工作