title: Responsive breadcrumbs with max crumb width
body: <p>I'm attempting to create a responsive breadcrumb trail where the overall trail width is restricted and each crumb width is also restricted. Additionally, I'd like to allow for the last crumb to take up any additional space. I've managed to put the following together that mostly demonstrates what I'm going for, but the JQuery solution is less than idea:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(document).ready(function() {
    var $crumbs = $(".container .breadcrumb li");
    var overallWidth = $(".container").width();
    var crumbWidth = (100 / $crumbs.length) + '%';
    $crumbs.css('max-width', crumbWidth);
  
    var totalWidth = 0;
    $crumbs.each(function(elt) {
      var width = $(this).width();
      totalWidth += width;
    });
  
    var adjustment = overallWidth - totalWidth;
  
    var $lastCrumb = $(".container .breadcrumb li:last");
    var lastCrumbWidth = $lastCrumb.width();
    lastCrumbWidth = lastCrumbWidth + adjustment;
    $lastCrumb.css('max-width', lastCrumbWidth - 25);
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.container {
    border: 1px solid;
    width: 70%;
  }
  .container .breadcrumb {
    padding-left: 10px;
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .container .breadcrumb li {
    display: inline-block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .container .breadcrumb li:before {
    color: blue;
    content: "&gt;";
    margin-right: 5px;
  }
  .container .optional,
  .container .optional &gt; div {
    display: inline-block;
  }
  .hidden {
    display: none !important;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;h1&gt;Breadcrumb Truncation with Ellipsis&lt;/h1&gt;
  
  &lt;div class="container"&gt;
    &lt;ul id="bc1" class="breadcrumb"&gt;
      &lt;li&gt;Home blah blah&lt;/li&gt;
      &lt;li&gt;about blah blah blah&lt;/li&gt;
      &lt;li&gt;super cali fragilistic expialidocious&lt;/li&gt;
      &lt;li&gt;super duper cali fragilistic expialidocious&lt;/li&gt;
      &lt;li&gt;UBER super duper cali fragilistic expialidocious&lt;/li&gt;
    &lt;/ul&gt;
    &lt;div class="optional"&gt;
      &lt;div class="hidden"&gt;&lt;button&gt;click me&lt;/button&gt;&lt;/div&gt;
      &lt;div class="hidden"&gt;&lt;span&gt;extra info&lt;/span&gt;&lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I'm sure this can be accomplished in a pure CSS way, but the solution is alluding me and probably beyond me.</p>
  
  <p>Additionally, ideally this solution would also accommodate the hiding and showing of various elements via the "hidden" that are in the "optional" section.</p>
  
  <p>UPDATE:
  I've made some progress with the following, but it still isn't ideal since I'm blindly using a fixed max-width:</p>
  
  <pre class="lang-css prettyprint-override"><code>.truncate {
      max-width: 250px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
  
      &amp;:last-child {
        max-width: 100%;
      }
  }
  </code></pre>
  
  <p>Here's a <a href="https://jsfiddle.net/fmpdmb/g823w63g/1/" rel="nofollow">jsfiddle</a> demonstrating some of the desired functionality.</p>