"Многабукаф" в пункте меню

Сегодня мы будем говорить об однострочных блоках текста. Это может быть, например, меню.
пример меню
Иногда бывает так, что текст занимает больше места, чем ему выделено макетом.
раскладка сломана
При этом текст, вылезающий из блока, тем или иным образом ломает раскладку строки меню.
Применив к блоку стилевое правило text-overflow:ellipse, можно не только ограничить внутренний текст размерами блока, но еще и добавить троеточие, как символ незавершенности текста:
длина пункта меню ограничена
Однако, при этом необходимо учитывать следующее:
  1. стилевое правило text-overflow:ellipse работает только в связке с двумя другими стилевыми правилами: overflow:hidden и white-space: nowrap
  2. получить такой эффект можно только в том случае, если текст в блоке расположен в одну строку
  3. не забудьте предоставить пользователю полный текст во всплывающем окне (атрибут title)
Для любознательных — код меню, показанного на нижнем рисунке

HTML
<ol class="menu">
	<li><a href="#" title="Пункт меню № 1">Пункт меню № 1</a></li>
   	<li><a href="#" title="Абстрактное высказывание, не учитывая количества слогов, абсурдно редуцирует ритм">Абстрактное высказывание, не учитывая количества слогов, абсурдно редуцирует ритм</a></li>
	<li><a href="#" title="Пункт меню № 1">Пункт меню № 3</a></li>
</ol>

CSS
.menu {
	list-style:none;
	padding:0;
	margin:0;
	border-bottom:solid 5px #00CCFF;
        height:40px;    
}
.menu li {
	display:inline-block;
	*display:inline;	/* спасибо тебе, дядюшка Билли!!! */
	zoom:1;
}
.menu li a {
	display:block;
	width:250px;
	height:40px;
	line-height:40px;
	margin:0 10px;
	text-align:center;
	text-decoration:none;
	font-weight:bold;
	color:#666;
	background:#00CCFF;
      	white-space: nowrap;     /* вытягиваем текст в одну линию */
	overflow:hidden;            /* удаляем все, что выступает */ 
	text-overflow:ellipsis;     /* добавляем троеточие */

}
.menu li a:hover {color:#C03}

P.S. При подготовке статьи (впрочем, как и всегда) использованы Яндекс рефераты
  • 1
  • мне нравится
    не нравится
    +2
  • 10

1 комментарий

avatar
Очень порадовал этот комментарий:
/* спасибо тебе, дядюшка Билли!!! */