Текст переполнения должен динамически изменять размер контейнера

На моем веб-сайте я добавил одно изображение (красиво окрашенное поле типа прямоугольной формы). Я разместил на нем какой-то текст.Текст переполнения должен динамически изменять размер контейнера

Теперь, когда я открываю его на экранах меньшего разрешения, текст выходит из коробки вертикально. Я хочу остановить это и сделать jog box (я имею в виду здесь div) растягиваемым по вертикали в соответствии с текстом.

Есть ли простой способ сделать это?

Edit: Тег тела идет как этот

<body> 
<div .class="container"> 
    <img src="pic.jpg" class="pic" alt=""> 
    <h2>some lenghty text</h2> 
</body>

и CSS идет здесь

.pic { 
    /* because as the pic is very large and need to center that */ 
    width:40%; 
    margin-right:auto; 
    margin-left:auto; 
    display:block; 
} 

.container { 
    width:100%; 
    margin-right:auto; 
    margin_left:auto; 
    top:200px; 
    position:relative; 
} 

h2 { 
    position:absolute; 
    font-size:20px; 
    font-color:blue; 
}

Так что с выше кусок кода, я не достичь того, что я хочу, т.е. если длина текста увеличивается (на некоторых небольших экранах или при изменении размера) контейнер, то есть jpg, должен быть увеличен вертикально вниз по экрану, чтобы текст сидел хорошо внутри самого изображения самого окна.

источник

2010-12-30 simple-coder

попытка переполнения у: авто; – Vivek

@Vivek, если он выходит из строя, настройка переполнения изменит только то, как отображается переполняющий текст (или не отображается). Это не приведет к растягиванию коробки. –

Пожалуйста, используйте кнопку кода '{}' и возьмите секунду, чтобы прочитать, как правильно отформатировать ваш вопрос. –

Скорее всего, у дивана была заданная высота. Если вы «проверяете элемент» на div, используя firebug или chrome, вы должны иметь возможность выслеживать правило CSS, которое устанавливает эту высоту. Затем либо удалите это правило, либо измените height: на min-height:.

Update:

Проблема заключается в том, что DIV является расширяется, но изображение не является. Пока свойство CSS3 background-size не очень хорошо поддерживается, вы можете просто установить высоту IMG до 100%:

img.pic { 
    height: 100%; 
}

источник

2010-12-30 10:52:44

спасибо box9, но я держу любой тег высоты в css, пожалуйста, проверьте мой модифицированный код для css, который я использовал. .. –

@ простой-кодер, я не вижу CSS. Также возможно, что некоторый javascript устанавливает высоту CSS. Лучшим способом проверки является проверка элемента в firebug и chrome (как боковой панели CSS, так и встроенного атрибута style). Если вы все еще уверены, что высота не задана где-то, тогда вы можете отправить некоторую HTML и CSS в свой вопрос;) –

am извините box9, я только что добавил ... можно посмотреть и посмотреть –

Текст переполнения должен динамически изменять размер контейнера

ответ

Смежные вопросы