Vuetify v-btn — 换行文本

Question

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

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

没用。文字刚好居中，两边溢出。

Someone 在这里询问，答案是“重要的是要注意 Material 设计规范反对这一点”，但是如果我们忽视正确的 Material 设计规范？我的用例有时需要按钮上的长文本字符串（一个教育应用程序，按钮上有句子供用户 select）。因此，这些有时很长并且需要文字换行。

Answer 1

在 discord 上与 Vuetify 核心团队成员交谈后，发现 v-btn 是不可能的。

但是，他告诉我可以在其他组件上使用 v-ripple，包括标准按钮。将其与 css :hover 相结合，很容易重新创建允许 word-wrap 的 material 设计按钮，例如：

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

Vuetify v-btn — 换行文本

Vuetify v-btn — wrap text

css

vuetify.js