Vuetify v-btn包文本

Question

有了Vuetify v-btns，我如何包装溢出的文本？我试过：

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

但没起作用。案文只是以文本为中心，贯穿了双方。

有人问到了这个问题，答案是“重要的是要注意到材料设计规范是反对的”，但是如果我们忽略了适当的材料设计规范，这又是如何实现的呢？我的用例有时需要长串的文本按钮(一个教育应用程序，在按钮上的句子，供用户选择)。因此，这些有时是长的，需要文字包装。

Answer 1

在与一名Vuetify核心团队成员就不和谐问题进行交谈后，事实证明v-btn是不可能的。

然而，他告诉我，我可以在其他组件上使用v-ripple，包括标准按钮。将它与css :hover结合起来，就可以轻松地重新创建一个允许字包装的材料设计按钮，例如：

<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;
}