Текст переполнен плавающим div

Question

Текст переполнен плавающим div

0

У меня проблема с жидким макетом, который я пытаюсь создать. Мне было интересно, почему я не могу получить переполнение: скрытый для работы над текстом левого меню на этом сайте.

Как вы можете видеть здесь, я отмечен синим цветом, текст, который я хотел бы содержать в левом меню div, хотя он переполняет и подталкивает остальную часть сайта.

См. Здесь JS Bin: http://jsbin.com/OcoJEpe/2/edit?html,css,output

Спасибо за вашу помощь.

Джеймс.

James Hatton 22 окт. 2013, в 18:03

Источник

0

Вы хотите, чтобы переполнение было скрыто только в левом меню? на какой высоте?
DaniP 22 окт. 2013, в 15:47
1

И каким должен быть выход? Для переполнения содержимое должно быть больше контейнера. Ваш контейнер не имеет ограничений.
MC ND 22 окт. 2013, в 15:48
0

Да, верно, я хочу, чтобы текст был скрыт в левом меню, чтобы вы не могли видеть красный в основном. (# текст в левом меню толкает страницу вниз)
James Hatton 22 окт. 2013, в 15:50

Показать ещё 1 комментарий

Теги:

html

css

overflow

4 ответа

Ещё вопросы

Вы хотите, чтобы переполнение было скрыто только в левом меню? на какой высоте?
И каким должен быть выход? Для переполнения содержимое должно быть больше контейнера. Ваш контейнер не имеет ограничений.
Да, верно, я хочу, чтобы текст был скрыт в левом меню, чтобы вы не могли видеть красный в основном. (# текст в левом меню толкает страницу вниз)

jbaum012 · Answer 1 · 2013-10-22T14-46-00.000Z

Причина, по которой overflow:hidden; не работает, потому что ваше left-menu div расширяется из-за размера текста. У вас нет кода (css или html), который ограничивает высоту вашего left-menu. Существует несколько способов решения этой проблемы, но по существу вам нужно сказать, что div подходит только к определенной высоте.

SaturnsEye · Answer 2 · 2013-10-22T13-51-00.000Z

Вам нужно добавить высоту в левое меню, посмотреть на этот jsfiddle

Mister Epic · Answer 3 · 2013-10-22T13-24-00.000Z

Ваша height на этом элементе использует значение по умолчанию для auto поэтому оно будет расширяться для размещения его содержимого.

Вам нужно указать некоторую высоту:

  #left-menu{height:200px;} //OR SOME NON-AUTO HEIGHT

David · Answer 4 · 2013-10-22T12-59-00.000Z

Это рабочий пример, вы должны просто добавить height для p и установить overflow:hidden.

Вот html

<p id="height"><span>This text is overflowing parent div...</span>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse a odio ac nulla aliquet molestie. Cras aliquet metus eget vehicula vulputate. Donec eget nisl sit amet quam fringilla molestie. Vivamus elementum non justo quis consequat. Etiam quis quam eu nisi cursus aliquet eu et arcu.
    </p>

и css

p#height{
      height:30px;
      background:red;
      overflow:hidden;
    }