代码之家 › 专栏 › 技术社区 › Nicke Manarin

Buefy工具提示中的新行

buefy vuejs2 vue.js html javascript

Nicke Manarin · 技术社区 · 5 年前

我想显示一个文本,其中应该包含一些新行作为工具提示文本。

<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不支持它。

编辑:

0 回复 | 直到 5 年前

Hans Felix Ramos 5 年前

将css空白更改为 pre 或 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

推荐文章

4r60_ · 如何停止VueJS上的间隔?[副本]

2 年前

Park · Vuejs道具,路径较长

3 年前

Mathijs · vue-chartjs4中的混合气泡图和折线图

3 年前

roev · 大堆来自(物体)。forEach不使用vue。js

3 年前

haferje · Vue。用于计算属性重新渲染的js加载指示器

6 年前

Ready Dev · Axios一次发出多个请求(vue.js)

7 年前

JeanValjean · 如何在Vue中使用事件总线通过自定义事件传递数据。js 2

7 年前

dede.brahma · VueJs-元素UI el select:如何获取值父级和子级

7 年前

tzortzik · 如何使用vue路由器将对象作为道具传递?

7 年前

Tim · VueJS-迭代从AJAX调用返回的数据

7 年前