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

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

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

它为顶栏绘制了一条下划线

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

所以我的问题是，当长文本占据两行时，如何使顶部栏延伸高度？可能我错过了topbar css样式中的某些内容

以下是topbar css样式：

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

---

谢谢。

如果要在文本的每行下划线，为什么不使用

text-decoration: underline

另外，如果要更改元素的高度，请使用“最小高度”属性，而不是“高度”。

尝试添加此属性

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

---

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

为div的css尝试以下方法：

word-wrap: break-word;

---

如果您有锅炉板，请使用clearfix。Tom Chung给出的答案也完成了同样的事情。我想在顶部的横栏下划下划线，而不是在文本的每行下面划下划线。

word-wrap: break-word;