当浏览器变小时，如何使包含文本的div扩展其高度？

Question

考虑以下代码。有一个包含长文本的顶栏

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

对于班级顶部栏，我有这一行，

border-bottom: 1px solid #b6b6b6;

为上边栏绘制下划线。

通常没有问题。长文本占一行。但是，当我缩小浏览器宽度时，长文本占用两行，下划线保留在原始位置。

所以我的问题是当长文本占据两行时如何使topbar扩展高度？可能我会错过topbar css风格的东西？

这是topbar css样式：

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

感谢。

Answer 1

如果您想为各行文字加下划线，为什么不使用

text-decoration: underline

此外，如果您想要更改元素的高度，请使用min-height属性而不是height。

Answer 2

尝试添加此内容。

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

明确：当有多行时，两者都有助于更改.topbar元素高度。

Answer 3

试试这个div的css：

word-wrap: break-word;