b-dropdown-item-button слишком длинный, как мне сделать его короче или обернуть текст? - PullRequest
Новая
       24

b-dropdown-item-button слишком длинный, как мне сделать его короче или обернуть текст?

2 голосов
/ 24 октября 2019

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>

1 Ответ

2 голосов
/ 24 октября 2019

Раскрывающийся список имеет min-width and пробел: 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/bootstrap-vue@2.0.4/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>
...