Question

在我的用户界面上，我的面包屑显示在顶部栏上。当设备宽度低于定义的宽度时，它将下降到顶部条下方并且是它自己的条，但是我不知道该怎么做是在面包屑长度大于设备宽度时添加尾部省略号。 / p>

示例面包屑：

<nav>
    <ul>
        <li>Home</li>
        <li>>></li>
        <li>User</li>
        <li>>></li>
        <li>Inbox</li>
        <li>>></li>
        <li>Mail_ID</li>
    </ul>
</nav>

注意： >>表示i 标记中的FontAwesome图标

当面包屑大于设备宽度时，我能描述的最佳内容如下所示：

主页＆gt;＆gt;用户＆gt;＆gt;收件箱＆gt;＆gt; Mail_ID
...用户＆gt;＆gt;收件箱＆gt;＆gt; Mail_ID
...收件箱＆gt;＆gt; Mail_ID
... Mail_ID

Answer 1

这仍然是部分代码，但可能对您有帮助。

观

加载时，调用一个检查ul及其父容器的函数。
如果ul的宽度更大，请隐藏前2个可见li。同时为省略号添加li并使其最初隐藏，并且只有在隐藏任何其他div时才使其可见。
递归地重复这个过程，你会得到你想要的东西。

<强>示例

＆＃13;

$(function() {
  $(".content").resizable();

  $(".content").on("resize", function() {
    var ul = $(this).find('ul');
    if (ul.width() > $(this).width()) {
      var lis = ul.find('li:not(.hide):not(.ellipsis)');
      for (var i = 0; i < 2; i++) {
        $(lis[i]).addClass("hide");
      }
      if ($(".ellipsis").not(":visible"))
        $(".ellipsis").removeClass("hide")
    }
  })
});

＆＃13;

.content {
  text-align: left;
  border: 1px solid gray;
  width: 300px;
  height: 40px;
  max-height: 40px;
}

.content ul {
  padding: 0px;
  position: fixed;
  overflow: hidden;
  white-space: nowrap;
}

.content ul li {
  display: inline-block;
  text-decoration: none;
}

.hide {
  display: none!important;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet" />
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div class="content">

  <ul>
    <li class="hide ellipsis">...</li>
    <li>Home</li>
    <li>>></li>
    <li>User</li>
    <li>>></li>
    <li>Inbox</li>
    <li>>></li>
    <li>Mail_ID</li>
  </ul>

</div>

＆＃13;

Answer 2

您可以尝试使用仅限CSS的省略号，但我不知道它是否也适用于<ul><li>。当然，它适用于简单的字符串：

使用此HTML：

<ul class="ellipsis">

这个CSS：

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

根据设备宽度将尾随省略号添加到面包屑

2 个答案:

观