Блог

У меня на странице появляется хлебная крошка, когда пользователь переходит по структуре каталогов, но я хочу предотвратить перенос хлебных крошек на новую строку, если она становится слишком длинной, и вместо этого начать сокращать путь.

Чтобы перейти от

 Home / Folder 1 / Folder 2
/ File
  

Для

 Home / ... / Folder 2 / File
  

http://jsfiddle.net/6vhhH/4/

На самом деле изменение текста — это не настоящая проблема, это определение того, когда хлебная крошка была обернута, и запуск кода для замены текста, когда кто-то изменяет размер окна.

Обновить:

Вот что у меня получилось, если это пригодится будущим поисковикам

http://jsfiddle.net/6vhhH/10/

вы могли бы проверить высоту вашего хлебного крошки при изменении размера страницы:

 $(window).resize(function() {
    if($("#breadcrumb").height() > singleLineValue) {
         // change
    } else {
         // change back
    }
}):
  

где ‘breadcrumb’ — это идентификатор оболочки вокруг вашей хлебной крошки (nav или div, как вам угодно)

С помощью этого ответа — http://jsfiddle.net/moagrius/wN7ah / и немного добавленного кода, у меня есть решение для вас — http://jsfiddle.net/6vhhH/7 /

В основном я сделал следующее:

• Сделано так, что хлебные крошки не переносятся, а переполнение скрыто.
• Я добавил точку размером 1 пиксель к последнему <li>
• Затем скрипт проверяет, отсутствует ли этот элемент на странице.

Щелкните окно, чтобы получить результат.