Expand div with "display: table-cell" on click?

Expand div with "display: table-cell" on click?

本文关键字：quot on click table-cell div Expand display with      更新时间：2023-09-26

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

  • 我希望他们都至少是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";
}

好的，我发现不能为显示为表格单元格的元素设置max-height

所以，我把我的文本包装在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";
}

尝试css样式word-wrap:ellipsis。

相关文章：