Сброс css спрятал рост контейнера

Пожалуйста, взгляните на эту скрипту - http://jsfiddle.net/Z27hC/

var container = document.createElement('span');
container.style.display = 'inline-block';
container.style.marginTop = '10px';
container.style.marginLeft = '50px';
container.style.background = 'lightblue';
document.body.appendChild(container);

var cell = document.createElement('span');
cell.style.display = 'inline-block';
cell.style.border = ' 2px solid black';
cell.style.width = '200px';
cell.style.height = '16px';
cell.style.overflow = 'hidden';
container.appendChild(cell);

var text_node = document.createTextNode('hallo');
cell.appendChild(text_node);

У меня есть контейнер, содержащий ячейку, содержащую текст node. Ячейка имеет фиксированную ширину.

Если текст, переданный в текст node, превышает ширину, я хочу, чтобы он был усечен, поэтому я установил ячейку в "overflow: hidden".

Он работает, но увеличивает высоту ячейки на 3 пикселя. Ячейка имеет границу, но увеличенная высота появляется ниже границы, а не внутри.

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

Я тестировал это на IE8 и Chrome с тем же результатом.

Любое из следующих решений будет в порядке -

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

В соответствии с запросом, вот новая скрипка, которая показывает более полный пример.

http://jsfiddle.net/frankmillman/fA3wy/

Я надеюсь, что это самоочевидно. Дайте мне знать, если вам нужно что-то объяснимое более подробно.

Вот (надеюсь) моя заключительная скрипка -

http://jsfiddle.net/frankmillman/RZQQ8/

Он включает идеи от всех респондентов, и теперь он работает так, как я хочу.

Есть два основных изменения.

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

Второе изменение, предложенное всеми респондентами, фактически устранило проблему. Вместо того, чтобы иметь элементы типа "span" с отображением "inline-block", теперь я использую "div" и тщательное сочетание "float left" и "float right" для достижения желаемого макета.

Большое спасибо всем.

Ответ 1

Позвольте мне объяснить вам, почему это происходит.

Согласно CSS 2.1 Specs,

Базовый уровень "встроенного блока" является базовым значением его последнего строкового поля в нормальном потоке, если он не имеет никаких строк в потоке или если его свойство "переполнения" имеет вычисленное значение, отличное от "видимого" ', в этом случае базовая линия - это край нижнего края.

Чтобы объяснить простыми словами,

i) Если встроенный блок имеет свойство переполнения, установленное на видимое (по умолчанию это не нужно устанавливать). Тогда его базовая линия будет базовой линией содержащего блока линии. ii) Если встроенный блок имеет свойство переполнения, то оно имеет значение OTHER, чем видимое. Тогда его нижнее поле будет находиться на базовой линии строки, содержащей поле.

Итак, в вашем случае встроенный блок cell имеет overflow:hidden (не VISIBLE), поэтому его край поля, граница cell находится в базовой линии элемента контейнера container.

Вот почему элемент cell выглядит нажатым вверх, а высота container увеличивается. Вы можете избежать этого, установив cell в display:block.

Ответ 2

Свойство overflow может изменить базовую линию элемента. Чтобы предотвратить это, вы можете использовать вертикальное выравнивание на встроенных блоках.

cell.style.display = 'inline-block';
cell.style.overflow = 'hidden';
cell.style.verticalAlign = 'bottom';

http://jsfiddle.net/23e0rny9/

Ответ 3

Попробуйте установить line-height: 0 для контейнера и line-height: 20px для ваших ячеек

container.style.lineHeight = '0px';

cell.style.lineHeight = '20px';

Fiddle

Или вы можете использовать float: left в своих ячейках

cell.style.float = 'left';

Fiddle2

Ответ 4

используйте блок dsiplay ячейки

cell.style.display = 'block';

и

cell.style.float= 'left';

для выравнивания влево, если вы хотите выровнять