Как разбить строку текста, чтобы она поместилась внутри Vue компонента?

Question

У меня есть v-btn с текстом, который больше, чем компонент, поэтому текст переполняет компонент. Я пытался использовать overflow-wrap: break-word;, но не работает.

<v-container fluid grid-list-md>
  <v-layout row wrap>
    <v-flex xs6>
      <v-btn style="overflow-wrap: break-word;" width="100%" height="60px" elevation="1">
        Registrar
        mensalidade
      </v-btn>
    </v-flex>
  </v-layout>
</v-container>

Результат: