根据设备宽度，将尾椭圆添加到面包屑中

Question

在我的用户界面上，我有一个面包屑，上面显示了顶部栏。在设备宽度低于定义的宽度以下时，它将掉落在顶部杆以下，并且是自己的栏，但是我不知道该怎么做的是在面包屑长度上添加一个尾随的椭圆，大于设备宽度。<<<<<<<<<<<<<<<<<<<</p>

示例BreadCrumb：

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

注意： >>代表i tag

中的fontaweshes图标

面包屑大于设备宽度时，我能描述的最好的事情如下：

：

• 主页>>用户>> inbox>> mail_id
• ...用户>> inbox>> mail_id
• ...收件箱>> mail_id
• ... mail_id

Answer 1

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

想法

• 在加载时，调用与ul及其父容器一起检查的功能。
• 如果ul具有更大的宽度，请隐藏第2个可见li。还为省略号添加li，并最初使其隐藏，并且只有在隐藏其他任何div时才能使其可见。
• 递归重复此过程，您将获得所需的内容。

示例

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

.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;
}

<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>

Answer 2

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

使用此html：

<ul class="ellipsis">

和此CSS：

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