b-dropdown-item-button is too long, how can I make it shorter or to wrap the text?

Question

DropDown

I'm using Bootstrap-vue. I need to make the b-dropdown-item-button wrap the text it's showing. How could I do that?

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

Answer 1

The dropdown has a min-width andwhite-space: nowrap` set by default, so you need to apply some css to override this.

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/[email protected]/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>