title: Force breadcrumbs items not breaking to another line when viewport is narrow
body: <p>I am trying to create breadcrumbs that has arrow look. This is the design. </p>
  
  <p><em>Please, note the text is in more lines inside each breadcrumb item, when too long.</em></p>
  
  <p><img src="https://i.stack.imgur.com/uVZie.jpg" alt="enter image description here"></p>
  
  <p>We can assume there will always be maximum 4 breadcrums items:</p>
  
  <ul>
  <li>Home</li>
  <li>First category</li>
  <li>Dots (for the case of more categories)</li>
  <li>Last category</li>
  </ul>
  
  <p>I have a solution, but since the design is responsive, the solution <strong>doesn't work at all for narrow viewports</strong>. When the text inside breadcrumb item is too long, it kept going in one line, making the breadcrumb item long. Then, when the viewport gets narrow, whole breadcrumb item is breaking into a new line. WRONG!</p>
  
  <p>I use Bootstrap.</p>
  
  <p>Any idea how to solve this?</p>
  
  <p><strong>Here goes fiddle</strong>: <a href="http://jsfiddle.net/aeoLcm1m/" rel="nofollow noreferrer">http://jsfiddle.net/aeoLcm1m/</a></p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;ul class="breadcrumb noppadinglr"&gt;
    &lt;li&gt;&lt;a href="#" class="home"&gt;&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;Vehicles&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#" class="dots"&gt;...&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;1989 VW Westfalia Vanagon&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt; 
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.breadcrumb {
    list-style: none;
    overflow: hidden;
    margin-bottom: 0px;
    border: 0px transparent;
    border-bottom: 2px solid #fff;
    padding: 0px;
    background: white;
    white-space: nowrap;
  }
  .breadcrumb .home {
    background: #d3d3d3 url(img/ico/ico-house.png) right center no-repeat;
    width: 40px;
    height: 48px;
    display: block;
  }
  .breadcrumb img {
    width: 75%;
    max-height: 18px;
  }
  .breadcrumb .dots {
    padding: 18px 0 10px 20px;
  }
  .breadcrumb li {
    float: left;
    display: inline-block;
    list-style: none;
  }
  .breadcrumb li a {
    color: black;
    text-decoration: none;
    padding: 18px 0 10px 40px;
    background: lightgrey;
    position: relative;
    display: inline-block;
    float: left;
  }
  .breadcrumb li a::after {
    content: " ";
    display: block;
    width: 0;
    height: 0;
    border-color: transparent transparent transparent lightgrey;
    border-width: 50px 0px 50px 30px;
    border-style: solid;
    position: absolute;
    top: 50%;
    margin-top: -50px;
    left: 100%;
    z-index: 2;
  }
  .breadcrumb li a::before {
    content: " ";
    display: block;
    width: 0;
    height: 0;
    border-color: transparent transparent transparent blue;
    border-width: 50px 0px 50px 30px;
    border-style: solid;
    position: absolute;
    top: 50%;
    margin-top: -50px;
    margin-left: 1px;
    left: 100%;
    z-index: 1;
  }
  .breadcrumb li:first-child a {
    padding-left: 10px;
  }
  .breadcrumb li:last-child a {
    background: lightblue !important;
    pointer-events: none;
    cursor: default;
  }
  .breadcrumb li:last-child a:after {
    border-left-color: lightblue;
  }
  </code></pre>