Как сделать div, который содержит текст, увеличивает его высоту, когда браузер становится меньше?

Question

Как сделать div, который содержит текст, увеличивает его высоту, когда браузер становится меньше?

0

Рассмотрим следующий код. Существует верхний бар, который содержит длинный текст

<div class="topbar">
    <div style="float:left;height:36px;line-height:36px;text-transform: none;">
        long text....
    </div>
</div>

Для класса topbar у меня есть эта строка,

border-bottom: 1px solid #b6b6b6;

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

Обычно нет проблем. Длинный текст занимает одну строку. Однако, когда я сокращаю ширину браузера, длинный текст занимает две строки, а подчеркивание остается в исходном положении.

Итак, мой вопрос заключается в том, как заставить верхнюю панель увеличить высоту, когда длинный текст занимает две строки? Возможно, я пропустил что-то в стиле topbar css?

Вот стиль topbar css:

font-size: 19px;
border-bottom: 1px solid #b6b6b6;
padding: 11px 0 7px 0;
color: #737171;
text-transform: none;

Благодарю.

Joe Huang 30 нояб. 2013, в 05:12

Источник

0

используйте clearfix, если у вас есть плита котла. Ответ, данный Томом Чангом, выполняет то же самое.
otherDewi 30 нояб. 2013, в 03:47

Теги:

html

css

3 ответа

Ещё вопросы

используйте clearfix, если у вас есть плита котла. Ответ, данный Томом Чангом, выполняет то же самое.

Tom Chung · Answer 1 · 2013-11-30T02-37-00.000Z

Попытайтесь добавить это.

.topbar:after{
    content:'';
    display:block;
    clear:both;
}

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

HICURIN · Answer 2 · 2013-11-30T02-20-00.000Z

Попробуйте это для своего div css:

word-wrap: break-word;

LJᛃ · Answer 3 · 2013-11-30T01-39-00.000Z

если вы хотите подчеркнуть отдельные строки текста, почему бы не использовать

text-decoration: underline

Кроме того, если вы хотите, чтобы высота элемента изменялась, используйте вместо него высоту атрибута min-height.

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