как сократить bread_cumb, когда он появляется на мобильном сайте

Question

, когда я просматриваю свой веб-сайт в мобильном телефоне с большим количеством фильтров. Длина крошки становится слишком большой. поэтому я хочу заменить все теги li, которые находятся за вторым последним li. Это означает, что все li, кроме первого, последнего и последнего-1 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>

это просто пример кода, который я добавил сюда.

Answer 1

Это мой первый ответ о переполнении стека, надеюсь, это то, что вам нужно, это ссылка на кодовый блок

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

Answer 2

Чистый 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;
  }

}

Answer 3

Вы можете попробовать с 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>