Обрезка сухаря

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

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

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

Некоторая> Навигация> Это> …>> слишком длинная

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

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

Сохраните корневой элемент, удалите следующие элементы до тех пор, пока панировочная сухарь не подойдет. Я бы рекомендовал вам сделать это на 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-парсер, чтобы сохранить привязывающие метки неповрежденными.

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

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

alt text

Надеюсь это поможет !

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

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

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

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

У Татьяны Улманен есть хорошая идея. Но внешний вид должен заменить li на span. Позже не будет заполняться целая строка. ref Вычислить ширину текста с помощью JavaScript