html - 将 替换为使其宽度适应容器 : possible? 的水平线

Question

我想实现这样的目标:

html:

<wathever>Hello this is<br topMargin="2px" botMargin="1px"/>my example</wathever>

结果:

Hello this is
_____________ 
my example

该行应根据容器的宽度调整其长度，我应该可以自由决定上边距和下边距。这可能仅通过 css 吗？

我包括了 extJS 标签(这是对 extjs 专家的解释，如果你不知道 extjs 是什么就忽略这部分)也是因为我想将这个特性用于网格的标题，所以获取多行标题。我已经尝试过将 GroupHeader 与这样的东西一起使用:

 columns:[{
        text: 'Hello this is',
        columns: [{
            text     : 'my example',
        },..

但我对最终结果并不满意，主要有两个原因:

1)尽管我使用的是组 header 功能，但副 header 始终只有一个，所以最后我使用了一个更复杂的组件来实现一些非常简单的事情。

2) 标题菜单同时出现在顶部和底部标题中，而我只想要一个标题菜单。

由于 header 的文本可以是 html，所以我只想修改
标签。

Answer 1

您或许可以替换 <br>用<hr>并根据需要设置样式。或者，只需将“Hello this is”和“my example”包裹在它们自己的元素中(例如 <p>)，并为其中一个元素添加顶部或底部边框。

.main-part {
    border-bottom: 2px solid #ccc;
}

<div class="my-header">
    <p class="main-part">Hello this is</p>
    <p>my example</p>
</div>