Vuetify v-btn — wrap text

Question

With Vuetify v-btns, how can I wrap text that overflows? I've tried:

.button {
  white-space: normal;
  display: inline-block;
  word-wrap: break-word;
}

which didn't work. The text is just centred and overflows both sides.

Someone here asked about it and the answer was "it's important to note that the Material Design spec is against this", but how can this be achieved if we disregard the proper Material Design spec? My use case sometimes requires long strings of text on buttons (an educational app with sentences on buttons for a user to select). So, these are sometimes long and require text-wrapping.

Answer 1

After speaking with a Vuetify core team member on discord, it turns out it's just not possible with v-btn.

However, he informed me that I can use v-ripple on other components, standard buttons included. Combine that with css :hover, and it's easy to recreate a material design button that allows word-wrap, e.g:

<button v-ripple style="background-color: #ffbe0b;" class="materialDesignButton pl-6 pr-6 pa-4 ma-2">??????</button>

.materialDesignButton {
  color:#fff;
  border-radius:5px;
  font-family: Avenir, Helvetica, Arial, sans-serif;
  font-size:1.04em;
  letter-spacing: 0.05em;
  width: auto;
  transition: 0.3s;
}

.materialDesignButton:hover {
  opacity: 0.7;
}