<div class="trunc-list-wrapper" id="mylist">
  <ul class="trunc-list">
    <li>
      <a href="#">A link</a>
    </li>
    <li>
      <a href="#">Somewhere</a>
    </li>
    <li>
      <a href="#">A bit longer</a>
    </li>
    <li>
      <a href="#">Another one</a>
    </li>
    <li>
      <a href="#">Yet another</a>
    </li>
    <li>
      <a href="#">Again</a>
    </li>
    <li>
      <a href="#">Last one</a>
    </li>
    <li aria-hidden="true" class="control  control--open">
      <a href="#mylist"><span>more</span></a>
    </li>
    <li aria-hidden="true" class="control  control--close">
      <a href="#"><span>less</span></a>
    </li>
  </ul>
</div>

<p>Resize this frame to see the truncating effect.</p>
/* Basic common settings: */
$primary-color: rgb(0,20,30);

* {
  box-sizing: border-box;
}

html {
  line-height: 1.25;
  font-family: 'Lato', sans-serif;
}



/* The pattern: */

.trunc-list-wrapper {
  height: 2.25em;
  overflow: hidden;
  padding-right: 3.5em;
}

.trunc-list {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  position: relative;
}

.trunc-list li {
  margin: 0;
  padding: 0;
  flex: 1 0 auto;
}

.trunc-list a {
  display: block;
  padding: 0.5em;
  text-align: center;
  white-space: nowrap;
  
  color: #fff;
  background: $primary-color;
}

.trunc-list a:hover,
.trunc-list a:active,
.trunc-list a:focus {
   background: lighten($primary-color, 10); 
}

.control {
  position: absolute;
  top: 0;
  right: -3.5em;
  width: 3.5em;
  
  height: calc((2.25em - 100%) * -1000);
  max-height: 2.25em;
  
  overflow: hidden;
}

.control a {
  text-decoration: none;
}

.control span {
  font-size: 0.75em;
  font-style: italic;
}

.control--close {
  display: none;
}

.trunc-list-wrapper:target {
  height: auto;
}

.trunc-list-wrapper:target .control--open {
  display: none;
}

.trunc-list-wrapper:target .control--close {
  display: block;
}

External CSS

  1. https://fonts.googleapis.com/css?family=Lato

External JavaScript

This Pen doesn't use any external JavaScript resources.