javascript - Buefy 工具提示中的新行

Question

我想显示一个应该包含几行新行的文本作为工具提示文本。

<b-tooltip label="Item 1 \r\n Item 2 \r\n Item 3" size="is-small" type="is-light" position="is-top" animated multilined>
  <b-button type="is-primary" size="is-large" icon-left="compact-disc">
      Action
  </b-button>
</b-tooltip>

新线路使用\r\n或<br>不工作。

如何在该元素上强制换行？

最好有一个适当的 html 内容作为工具提示，但目前 Buefy 不支持它。

编辑：

标签： javascripthtmlvue.jsvuejs2buefy

Answer 1

将 css 空白更改为preor pre-wrap：

.b-tooltip:after {
  white-space: pre !important;
}

并使用
而不是\n

  <b-tooltip label="Item 1 &#xa; Item 2 &#xa; Item 3" size="is-small" type="is-light" position="is-bottom" animated multilined>
    <b-button type="is-primary" size="is-large" icon-left="compact-disc">
      Action
    </b-button>
  </b-tooltip>

见：https ://codepen.io/hans-felix/pen/xxwggad