Какой должна быть ссылка в меню? Максимально короткой, но в тоже время смысл ее и суть должны быть понятны с первого взгляда.
Но что происходит на самом деле?
Говорим о вертикальном меню, но все справедливо и для горизонтальной навигации.
Вертикальное меню, помимо собственной ширины включая поля и отступы, ограничено шириной колонки, в которой находится.
В общем случае ширина колонки вариабельна, и колеблется в пределах 180px-200px.
Это связано еще и с тем, что в колонках практически всегда имеются рекламные блоки типа небоскреб со стандартными размерами 160*600 и если колонка будет довольно широкой, а реклама в них будет расположена по центру, то смотреться все будет не самым лучшим образом.
Понятно, что это не единственное ограничение, если к ссылкам меню пристегнута графика, текст самой ссылки, вернее суть оной не так просто выразить в двух-трех словах без переноса на вторую, а то и третью строку.
Решение проблемы с запретом переноса и обрезанием текста ссылки при помощи:
white-space:nowrap;overflow:hidden;
прост, но не всегда обрезанное слово или слова могут прояснить, что же там дальше, а меню это не тест на угадайку.
Скриншоты.
Для имитации возможной графики у ссылок меню пристроим квадратики из модернизированной версии меню с треугольниками.
Как видно перенос не украшает и вызывает смешанные чувства.
А вот так на много лучше.
Тема не новая, соответствующие публикации найти не составит большого труда.
Но не без ложки дегтя.
Браузер FireFox всех версий напрочь отказывается понимать, что к обрезанной ссылке надо добавить многоточие, а рисовать графику с многоточием под разный фон, на котором может находиться меню с учетом цвета самой ссылки - полное извращение.
Для OPERA также необходимо указать нужное правило.
Дополнительным минусом является то, что если у колонки, в которой расположено меню будет указан:
overflow:hidden;
Текст появляющийся при наведении курсора мыши на ссылку за пределы колонки не выйдет.
Тест страница, там есть все :)
Горизонтальный banner counters.php - width:494px;