用水平线替换<br/>，使其宽度适应容器：可能吗？

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）即使我使用的是groupheader功能，副标题也只是一个，所以最后我使用了一个更复杂的组件来实现非常简单的事情。

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

由于标题文字可以是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>