Nov 15

За заметку спасибо RMCreative. Читаем, смотрим пример.

Я для себя написал так:

.inline-block {
display: -moz-inline-stack;
display: inline-block;
_overflow: hidden;
zoom: 1;
*display: inline;
}

Теперь об ограничениях, которые я выискал:

  1. “width: auto”, которое стоит по умолчанию, для такого блока не подходит - если будет много текста - он начинает “расползаться” за пределы body.
  2. Текст напрямую писать в такой блок тоже не советую: если ширина не указано - см. случай выше, а если указана - текст будет обрезан, на новую строку FF его переносить не хочет.

Примеры:

.inline-block {
display: -moz-inline-stack;
display: inline-block;
_overflow: hidden;
zoom: 1;
*display: inline;
}
<div class = "inline-block">enenatis felis. Fusce eget tortor. Duis in purus. Etiam facilisis sapien quis lectus. Duis vel enim vitae nulla ultricies consequat. Morbi enenatis felis. Fusce eget tortor. Duis in purus. Etiam facilisis sapien quis lectus. Duis vel enim vitae nulla ultricies consequat. Morbi</div>

Без указания ширины

.inline-block {
display: -moz-inline-stack;
display: inline-block;
_overflow: hidden;
zoom: 1;
*display: inline;
}

div  { width: 50%; }
<div class = "inline-block">enenatis felis. Fusce eget tortor. Duis in purus. Etiam facilisis sapien quis lectus. Duis vel enim vitae nulla ultricies consequat. Morbi enenatis felis. Fusce eget tortor. Duis in purus. Etiam facilisis sapien quis lectus. Duis vel enim vitae nulla ultricies consequat. Morbi</div>

Без вложенных блоков

.inline-block {
display: -moz-inline-stack;
display: inline-block;
_overflow: hidden;
zoom: 1;
*display: inline;
}

div  { width: 50%; }
<div class = "inline-block"><p>enenatis felis. Fusce eget tortor. Duis in purus. Etiam facilisis sapien quis lectus. Duis vel enim vitae nulla ultricies consequat. Morbi enenatis felis. Fusce eget tortor. Duis in purus. Etiam facilisis sapien quis lectus. Duis vel enim vitae nulla ultricies consequat. Morbi</p></div>

Без вложенным блоком

written by fxposter


Leave a Reply