DanL DanL - 6 months ago 11
jQuery Question

How to make an element remain inline

I'm using a breadcrumb system, like this. I'm writing some code to make the crumbs responsive and collapse for smaller screens. It's all coming along well enough, but I'm having difficulty fixing an unruly final crumb/page title.

In this case, the page title is "Really long heading to show how it breaks the design" But it should cut itself off with dots, such as "Really long heading..." instead of breaking to the next line.

I tried a couple of classes that I created,

no-wrap
and
dot-overflow
but neither of them did the trick.

For some reason, forcing the height attribute to
50px
or similar to keep it on one line creates an issue with the content underneath being covered by the crumbs, and still doesn't prevent the text from breaking to the next line.

JS Fiddle: https://jsfiddle.net/7o1o81xa/

The CSS

.no-wrap {
white-space:nowrap;
}

.dot-overflow {
overflow:hidden;
text-overflow: ellipsis;
white-space: nowrap;
}


The HTML

<div class="breadcrumbs-compact-container">
<div class="breadcrumbs-compact flat">
<a href="#" class="active">Support</a>
<a href="#">How To</a>
<a href="#"><span class="dot-overflow no-wrap">Really long heading to show how it breaks the design</span></a>
</div>
<div style="clear: both;"></div>
</div>

Answer

you can provide use media query for that like below:

you can change width that you want to break. and defined max width to your last link.

@media screen and (max-width:700px){
  a.dot-overflow {
    max-width:200px;
  }
}

Check below code snippet made from your code.

var crumbLinkOriginalValues = new Array();

$(function() {
  checkCrumbSizePerpetual();
});

function checkCrumbSizePerpetual() {
  checkCrumbSize();
  $(window).resize(function() {
    checkCrumbSize();
  });
}

function checkCrumbSize(returnWidth) {
  var overallWidth = 0;
  $('.breadcrumbs-compact a:last-of-type').css('display', 'inline-block').addClass('dot-overflow');
  $('.breadcrumbs-compact a').each(function() {
    overallWidth += $(this).outerWidth();
  });
  if (returnWidth)
    return overallWidth;

  if (overallWidth > $(window).width()) {
    // minimize crumbs
    minimizeCrumbs();
  } else {
    // check if we need to maximize it
    maximizeCrumbs();
  }
}

function maximizeCrumbs() {
  if ($('.crumb-to-minimize').length)
    maximizeCrumbsLiteral();
}

function minimizeCrumbs() {
  var crumbLinks = $('.breadcrumbs-compact a');
  var crumbCounter = 1;
  crumbLinks.removeClass('crumb-to-minimize');
  crumbLinks.each(function() {
    var text = $(this).text();
    if (text != '...') {
      crumbLinkOriginalValues[crumbCounter - 1] = new Array();
      crumbLinkOriginalValues[crumbCounter - 1]['text'] = text;
      crumbLinkOriginalValues[crumbCounter - 1]['padding-left'] = $(this).css('padding-left');
      crumbLinkOriginalValues[crumbCounter - 1]['padding-right'] = $(this).css('padding-right');
      $(this).attr('title', $(this).text());
    }
    $(this).attr('data-crumb-counter-id', crumbCounter - 1);
    if (crumbCounter < crumbLinks.length)
      $(this).addClass('crumb-to-minimize');
    else
      minimizeCrumbsLiteral();
    crumbCounter++;
  });
}

function minimizeCrumbsLiteral(selfRan) {
  $('.breadcrumbs-compact a.crumb-to-minimize').text('...').css('padding-left', '25px').css('padding-right', '2px');
  $('.breadcrumbs-compact a:first-of-type').css('padding-left', '5px').css('padding-right', '5px');

  // check if first one needs to be reduced
  if (typeof selfRan != 'undefined' && !selfRan && checkCrumbSize(true) < $(window).width()) {
    $('.breadcrumbs-compact a:first-of-type').addClass('crumb-to-minimize');
    minimizeCrumbsLiteral(true);
  }
}

function maximizeCrumbsLiteral() {
  $(this).attr('data-crumb-counter-id');
  var crumbLinks = $('.breadcrumbs-compact a');
  crumbLinks.each(function() {
    var thisCrumbsVals = crumbLinkOriginalValues[$(this).attr('data-crumb-counter-id')];
    $(this).text(thisCrumbsVals['text']).css('padding-left', thisCrumbsVals['padding-left']).css('padding-right', thisCrumbsVals['padding-right']);
  });
}
@import url(http://fonts.googleapis.com/css?family=Merriweather+Sans);
.breadcrumbs-compact-container {
  position: relative;
  z-index: 1;
  box-shadow: 0 0 15px 1px rgba(0, 0, 0, 0.35);
  padding: 0;
}

.breadcrumbs-compact {
  font-family: 'Merriweather Sans', arial, verdana;
  text-align: center;
  display: inline-block;
  overflow: hidden;
  margin: 0;
  margin-bottom: -6px;
  counter-reset: flag;
}

.breadcrumbs-compact a {
  text-decoration: none;
  cursor: pointer;
  outline: none;
  display: block;
  float: left;
  font-size: 16px;
  line-height: 36px;
  color: white;
  padding: 0 10px 0 30px;
  background: #666;
  background: linear-gradient(#666, #333);
  position: relative;
}

.breadcrumbs-compact a:first-child:before {
  left: 14px;
}

.breadcrumbs-compact a.active,
.breadcrumbs-compact a:hover {
  background: #333;
  background: linear-gradient(#333, #000);
}

.breadcrumbs-compact a.active:after,
.breadcrumbs-compact a:hover:after {
  background: #333;
  background: linear-gradient(135deg, #333, #000);
}

.breadcrumbs-compact a:after {
  content: '';
  position: absolute;
  top: 0;
  right: -18px;
  width: 36px;
  height: 36px;
  transform: scale(0.707) rotate(45deg);
  z-index: 1;
  background: #666;
  background: linear-gradient(135deg, #666, #333);
  box-shadow: 2px -2px 0 2px rgba(0, 0, 0, 0.4), 3px -3px 0 2px rgba(255, 255, 255, 0.1);
  border-radius: 0 5px 0 50px;
}

.breadcrumbs-compact a:last-child:after {
  content: none;
}

.breadcrumbs-compact.flat a:last-of-type {
  border-right: none;
}

.breadcrumbs-compact.flat a,
.breadcrumbs-compact.flat a:after {
  background: white;
  color: #555;
  transition: all 0.5s;
}

.breadcrumbs-compact.flat a:before {
  background: white;
  box-shadow: 0 0 0 1px #ccc;
}

.breadcrumbs-compact.flat a:hover,
.breadcrumbs-compact.flat a.active,
.breadcrumbs-compact.flat a:hover:after,
.breadcrumbs-compact.flat a.active:after {
  background: #00C247;
  color: white !important;
}

.breadcrumbs-compact.flat a:last-of-type:hover {
  background: none;
  color: black !important;
}



.no-wrap {
    white-space:nowrap;
}

.dot-overflow {
    overflow:hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

 @media screen and (max-width:700px){
      a.dot-overflow {
        max-width:150px;
      }
    }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>

<div class="breadcrumbs-compact-container">
  <div class="breadcrumbs-compact flat">
    <a href="#" class="active">Support</a>
    <a href="#">How To</a>
    <a href="#"><span class="dot-overflow no-wrap">Really long heading to show how it breaks the design</span></a>
  </div>
  <div style="clear: both;"></div>
</div>

Comments