vue.js - b-dropdown-item-button 太长，如何使其变短或换行？

Question

DropDown

我正在使用 Bootstrap-vue 。我需要使 b-dropdown-item-button 包裹它显示的文本。我怎样才能做到这一点？

<template>
  <b-dropdown menu-class="py-1" text="··· Actions">
    <b-dropdown-item-button>Delete</b-dropdown-item-button>
  </b-dropdown>
</template>

Answer 1

默认情况下，下拉菜单设置了 min-width 和 white-space: nowrap`，因此您需要应用一些 css 来覆盖它。

window.onload = () => {
  new Vue({
    el: '#app'
  })
}

<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap/dist/css/bootstrap.min.css" />
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.css" />

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.js"></script>
<script src="https://unpkg.com/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="761419190205020417065b000313364458465842" rel="noreferrer noopener nofollow">[email protected]</a>/dist/bootstrap-vue.min.js"></script>

<style>
/* Adding it here since it wasn't working in the snippet CSS */
body { padding: 1rem; }

/* Removes the min-width on the dropdown-menu and sets the width to 100% of the parent */
.wrap-dropdown {
  width: 100%;
  min-width: 0;
}

/* applies white-space: normal to all tags inside the dropdown-menu */
.wrap-dropdown * {
  white-space: normal;
}
</style>

<div id="app">
  <b-dd menu-class="py-1 wrap-dropdown" text="··· Actions">
    <b-dd-item-btn>Delete</b-dd-item-btn>
    <b-dd-item-btn>
      This text is really long
    </b-dd-item-btn>
  </b-dd>
</div>