Question

我正在尝试创建响应式面包屑路径，其中整个路径宽度受到限制，每个碎屑宽度也受到限制。另外，我想允许最后一块面包屑占用任何额外的空间。我已经成功地将以下内容放在一起，主要展示了我的目标，但JQuery解决方案不是很有想法：

$(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);
});

.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: ">";
  margin-right: 5px;
}
.container .optional,
.container .optional > div {
  display: inline-block;
}
.hidden {
  display: none !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>Breadcrumb Truncation with Ellipsis</h1>

<div class="container">
  <ul id="bc1" class="breadcrumb">
    <li>Home blah blah</li>
    <li>about blah blah blah</li>
    <li>super cali fragilistic expialidocious</li>
    <li>super duper cali fragilistic expialidocious</li>
    <li>UBER super duper cali fragilistic expialidocious</li>
  </ul>
  <div class="optional">
    <div class="hidden"><button>click me</button></div>
    <div class="hidden"><span>extra info</span></div>
  </div>
</div>

我确信这可以用纯CSS方式完成，但解决方案是暗指我，可能超出我的范围。

此外，理想情况下，此解决方案还可以通过“可选”部分中的“隐藏”来隐藏和显示各种元素。

更新：我已经在以下方面取得了一些进展，但由于我盲目地使用固定的最大宽度，它仍然不理想：

.truncate {
    max-width: 250px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

    &:last-child {
      max-width: 100%;
    }
}

这是展示一些所需功能的jsfiddle。

响应性面包屑，最大面包屑宽度

0 个答案: