Обрезка хлебной крошки

Question

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

Проблема заключается в том, что навигационная панель имеет фиксированную ширину (допустим, 900 пикселей). Таким образом, если пользователь переходит к элементу, местоположение которого приводит к появлению сундучка размером более 900 пикселей, мне придется его обрезать чтобы вписаться в дизайн.

Итак, часть, где я застряла, такова: как я могу решить, как аккуратно обрезать и где подрезать? Я понял, что я мог бы просто обрезать перетекание текста в середине навигационной цепочке, так что это приведет к

Some> Навигация> Что> ...> это> тоже> длинный

Но как я могу решить, где вырезать? И как я смогу сохранить привязки элементов от обрезки ?!

Я действительно застрял на этом, есть ли принятый способ справиться с такими проблемами ?!

Answer 1

Держите корневой элемент, удалите следующие элементы до тех пор, пока панировочная сухарь не подойдет. Я бы рекомендовал вам сделать это на JavaScript, так как тогда у вас будут методы для вычисления ширины пикселя сухаря, тогда как в PHP вам придется использовать фиксированное количество символов в качестве точки останова, которая всегда приводила бы к разной длины. Использование JS было бы лучше в любом случае для SEO и таких, поскольку ссылки все равно были бы там, только скрытые.

Если у вас есть простой элемент списка, как ваша: навигационная цепочка

<ul id="breadcrumb"> 
    <li><a href="/">Home</a></li> 
    <li><a href="/products/">Products</a></li> 
    <li><a href="/products/hats/">Hats</a></li> 
    <li><a href="/products/hats/large/">Large</a></li> 
    <li><a href="/products/hats/large/red/">Red</a></li> 
    <li><a href="/products/hats/large/red/round/">Round</a></li> 
</ul> 

Вы можете обрезать длину, как это (с помощью JQuery):

if($('#breadcrumb').width() > 900) { 
    $('#breadcrumb li:first').after('<li>...</li>'); 

    while($('#breadcrumb').width() > 900) {  
     $('#breadcrumb li').eq(2).remove(); 
    } 
} 

Простого примера и, вероятно, не работа, но должна дать вам некоторую идею.

BTW, если вы хотите сделать обрезку в PHP, вам нужно сделать это, когда формируется хлебная крошка, если вы хотите сохранить ее простой. Если вы начнете обрезку впоследствии, вам придется прибегать к некоторым довольно сложным регулярным выражениям или включать в проект какой-либо DOM-парсер, чтобы сохранить привязывающие метки неповрежденными.

Answer 2

Предполагая, что вы не хотите, чтобы панировочные сухари сделали перерыв, когда достигли цели, вот что вы делаете.

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

Взгляните на эту страницу.

http://www.the-art-of-web.com/php/truncate/

Answer 3

Я понимаю, что мое решение более ориентированного программирования, чем, но лично я бы не урезать хлебные крошки. Вместо этого, если содержимое панировочных сундуков превышает 900 пикселей, я бы наложил png, который переходил от полностью непрозрачной к полной прозрачности и просто заставлял выглядеть так, как первая часть панировочных сухарей исчезает. Затем с jQuery я прокручивал панировочные сундуки слева или справа в зависимости от положения мыши над ним (в зависимости от процента слева от правого края, где центр равен 0% или 100%).Таким же образом я бы использовал перевернутую версию того же прозрачного png-изображения с правой стороны, когда курсор ближе к левому краю.

Вот пример, чтобы лучше проиллюстрировать то, что я говорю:

Надеется, что это помогает!

Answer 4

У Tatu Ulmanen есть хорошая идея. Но внешний вид должен заменить li на span. Позже не будет заполняться целая строка. ref Calculate text width with JavaScript