当面包屑出现在移动网站时如何缩短面包屑答案

【问题标题】：how to shorten the breadcrumb when it appears in mobile website当面包屑出现在移动网站时如何缩短面包屑
【发布时间】：2020-08-07 14:34:50
【问题描述】：

当我在移动设备上查看带有大量过滤器的网站时，面包屑长度变得太大。所以我想替换倒数第二个 li 后面的所有 li 标签。这意味着除了 first、last 和 last-1 li 之外的所有 li 都需要替换为点。

谁能帮我用 jquery、javascript 或 css 解决这个问题？

<ul class="left">
  <li class="active"><a href="#">Airways</a></li>
  <li><a href="#">Trauma</a></li>
  <li><a href="#">Medical</a></li>
  <li><a href="#">OB | Peds</a></li>
  <li><a href="#">Patient Assessment</a></li>
  <li><a href="#">Proprietary</a></li>
  <li><a href="#">Trauma</a></li>
  <li><a href="#">Medical</a></li>
  <li><a href="#">OB | Peds</a></li>
  <li><a href="#">Patient Assessment</a></li>
  <li><a href="#">Proprietary</a></li>
</ul>

这只是我在这里添加的示例代码。

【问题讨论】：

标签： javascript php html jquery css

【解决方案1】：

您可以像这样尝试使用 jquery。基本上如果它是一个较小宽度的设备，并且如果它不是第一个、最后一个或倒数第二个孩子，则链接标签的文本将被替换为'..'。

        <script>
        $(document).ready(function () {  

            if (window.matchMedia("(max-width: 767px)").matches) 
            { 
                // The viewport is less than 768 pixels wide 
                console.log("This is a mobile device.");                     
                $('ul.left li').each(function() {
                    $this = $(this); // cache $(this)                     
                    if (! $this.is(':first-child') && ! $this.is(':nth-last-child(2)') && ! $this.is(':last-child')    ) {
                          $this.find('a').text("..");
                    }                       
               });                  
            }     
        });
    </script>

【讨论】：

【解决方案2】：

这是我关于堆栈溢出的第一个答案，希望这是你想要的这是codepen链接

https://codepen.io/vatzkk/pen/yLYMJeG

HTML

<script src="https://kit.fontawesome.com/a076d05399.js"></script>
<ul class="left" id="bread">
        <li class="active"><a href="#">Airways</a></li>
 <li id="dropdown" style="display:none">
   <div class="dropdown" >
  <i class="dropbtn">...</i><i class="fas fa-caret-down"></i>
  <div class="dropdown-content" id="dropdown-list">

  </div>
</div>
  </li>
        <li><a href="#">Trauma</a></li>
        <li><a href="#">Medical</a></li>
        <li><a href="#">OB | Peds</a></li>
        <li><a href="#">Patient Assessment</a></li>
        <li><a href="#">Proprietary</a></li>
        <li><a href="#">Trauma</a></li>
        <li><a href="#">Medical</a></li>
        <li><a href="#">OB | Peds</a></li>
        <li><a href="#">Patient Assessment</a></li>
        <li><a href="#">Proprietary</a></li>
    </ul>

Javascript

//you can add your conditions over here 

document.getElementById("dropdown").style.display="block";
var arr=[...document.getElementById("bread").children];
var dropdownItems=arr.slice(2,-2);

dropdownItems.map(item=>{
  document.getElementById("bread").removeChild(item);
  document.getElementById("dropdown-list").appendChild(item);
});

【讨论】：

【解决方案3】：

纯 CSS 工作示例：https://jsfiddle.net/3o8vuwd6/2/

首先给你的列表一个类

<ul class="left breadcrumblist">

CSS：

/* This is just to give it some styling as you haven't given any */
.breadcrumblist li {
    list-style: none;
    display: inline-block;
    padding-right: 0.5em;
}
.breadcrumblist li + li::before{
  content: "/";
  padding-right: 0.5em;
}


/* adjust to your breakpoint. 9999 just so it works on large screen as an example */
@media only screen and (max-width: 9999px)  { 
  /* hide all */
  .breadcrumblist li{
    display: none;
  }
  /* show first and last */
  .breadcrumblist li:first-child,
  .breadcrumblist li:last-child{
    display: inline-block;
  }

  /* add ... to the end of the first one */
  .breadcrumblist li:first-child::after{
    content: "...";
    padding-left: 0.5em;
  }

  /* fiddle with the content we added in styling */
  .breadcrumblist li + li::before{
    content: "";
    padding-right: 0;
  }

}

【讨论】：

【解决方案4】：

感谢大家的指导，最后我根据我的要求做了一些工作，我也想在这里分享它，因为如果将来有人寻找同样的问题，他或她可以从中受益。这也来自您刚刚在上面发布的所有修改。

<ul class="left" id="bread_cumb">
 $(document).ready(function(){
        if (window.matchMedia("(max-width: 767px)").matches) 
        
            var width = $(window).width();
            if (width < 720) {
               
            $('#bread_cumb li:not(:first-child):not(:nth-child(2)):not(:last- 
            child):not(:nth-last-child(2))').html('<span style="margin- 
            left:7px;margin-right:7px;">  ...  </span>');
            var last =$('#bread_cumb li:last-child').text();
            var re = /^([A-Za-z0-9_'",.!@#$%^&*()-+=?/\|:]+)[\s,;:]+([a-z]+)/i;  
                var m = re.exec(last);
            $('#bread_cumb li:last-child').html('<a>'+m[1]+' '+m[2]+'...</a>');
               
            }
          });
Thanks all for your valuable ideas.

【讨论】：