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

Question

I have a series of components on my page:

• I want them all to be at least 150px tall.
• If they are not 150px tall, I want to vertically center their text.
• If they are more than 150px I want to cut off the text at 150px and have a show more button expand it if desired.

Right now, the first situation, where they are not 150px tall works fine, the text is centered. The problem is I can not get components with height > 150px to cut off their content.

I am trying to do this without 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

Ok, I figured out that you can't set a max-height for an element displayed as a table cell

So, I wrapped my text inside a div, set all the max-height and overflow properties there, and it worked great.

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

Try css style word-wrap:ellipsis. It will work