Panel with Text Overflow Ellipsis

A popover Panel with Text Overflow Ellipsis using flex box

by amindunited

HTML

<div class="page">

  <h1>
    Page Title
  </h1>
  <nav>
    <button name="panel-button">
      Panel
    </button>
  </nav>
  <div class="card">
    <h2>
      Lorem
    </h2>
    <p>
      I'm baby raw denim flexitarian intelligentsia, sriracha man braid portland four loko brooklyn ugh ennui kinfolk. Polaroid craft beer mustache snackwave yuccie pabst air plant mumblecore cold-pressed ethical cronut kinfolk cliche XOXO pug. Wayfarers green juice pork belly, kinfolk fingerstache keytar leggings. Farm-to-table coloring book street art neutra sustainable vice.
    </p>
  </div>
  <div class="panel">
    <h3>
      Panel Title
    </h3>
    <div class="container">
      <div class="left">
          <div class="overflow-wrap">
            Once Left, but now a long long string street art neutra sustainable vice.
          </div>
      </div>
      <div class="right">
        Right
      </div>
    </div>
  </div>
</div>

CSS

html, body {
  padding: 0;
  margin: 0;
  background-color: #efefef;
}
.page {
  
}
.card, .panel {
  background-color: white;
  padding-left: 8px;
  padding-right: 8px;
  padding-top: 8px;
  padding-bottom: 8px;
  border-radius: 3px;
  box-shadow: 1px 2px 3px 1px rgba(0, 0, 0, .25);
}

.panel:not(.open) {
  width: 0;
  height: 0;
  overflow: hidden;
  padding: 0;
  transition: width 500ms ease-in-out, height 500ms ease-in-out;
}
.panel.open {
  position: absolute;
  top: 0;
  right: 0;
  border: solid 1px #998877;
  width: 33%;
  height: auto;
  overflow: visible;
  transition: width 500ms ease-in-out, height 500ms ease-in-out;
}
.panel .container { border: solid 1px orange; display: flex; }
.panel .left { border: solid 1px yellow; width: calc(100% - 10rem); }
.panel .right { border: solid 1px blue; }
.panel .overflow-wrap {
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

JavaScript

const logging = false;
const panelButton = document.querySelector('button[name="panel-button"]');
const panel = document.querySelector('.panel');
if (logging) { console.log(panelButton); }

panelButton.addEventListener('click', () => {
	panel.classList.toggle('open');
});