Vuetify v-btn — 换行文本

Question

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

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

这不起作用。文字正好居中并溢出两侧。

有人问过这个问题，答案是“值得注意的是，Material Design 规范是反对这一点的”，但是如果我们忽视正确的 Material Design 规范，如何实现这一点呢？我的用例有时需要按钮上的长文本字符串（一个教育应用程序，按钮上有句子供用户选择）。因此，这些有时很长并且需要文字换行。

Answer 1

与 Vuetify 核心团队成员在 Discord 上交谈后，发现这是不可能的

v-btn

。

但是，他告诉我，我可以在其他组件上使用

v-ripple

，包括标准按钮。将其与 css

:hover

结合起来，就可以轻松地重新创建允许自动换行的 Material Design 按钮，例如：

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

Answer 2

我设法使用以下 css 规则强制自动换行：

:deep(.v-btn__content) {
    white-space: pre-wrap;
}

@参见https://vuejs.org/api/sfc-css-features.html