如何在html按钮中添加两行（一个条件）？

I'm trying to add two lines inside an HTML button, but can't seem to find anywhere what elements are allowed - I know divs, paragraphs, and breaks aren't.

我试图在HTML按钮中添加两行,但似乎无法找到允许哪些元素 - 我知道div,段落和中断不是。

What I have so far is this:

到目前为止我所拥有的是:

<button>
  Option 1
  <span ng-if="{{option2Allowed}}>Option2</span>
</button>

I want to be able to make Option 2 be on a different line than Option 1. So, if option2Allowed defaults to 'true', I have something like the following:

我希望能够使选项2与选项1位于不同的行上。因此,如果option2Allowed默认为'true',我会有以下内容:

Option 1
Option 2

备选方案1备选方案2

How would I do this?

我该怎么做?

2 个解决方案

#1

Wrap both lines in a span tag, and set the display mode for the spans to block. Your second line span can still have the conditional statement.

将两行包裹在span标记中,并将跨度的显示模式设置为阻止。您的第二行范围仍然可以具有条件语句。

Example: https://jsfiddle.net/8k27g984/

#2

CSS tables perhaps might suit?

CSS表可能适合?

button {
  display: table;
  margin-bottom: 1em;
}
button span {
  display: table-row;
}

<button>
  <span>Option1</span>
  <span>Option2</span>
</button>

<button>
  <span>Option1</span>
</button>

#1