css - Vuetify - v-btn(按钮)的标签与横向边界重叠

Question

在下面的代码中，按钮应该断开线条并增加它的高度。但是文本与横向边界重叠(该行为在下面的 Codepen 链接中重现)。

如何修复？

Codepen

<v-btn  block outline color="indigo" class="no-text-transform">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam nec dapibus augue.
</v-btn>

Answer 1

之前没有使用过 Vuetify，我只能提供一个基本的解决方案(就是说，我确实查看了文档但找不到任何东西)......看起来 .v-btn__content生成的选择器应用了一个 white-space: nowrap。所以你可以做的是添加一个元素来包含你的文本来覆盖它父级的样式:

        <v-btn  block outline color="indigo" class="no-text-transform">
          <span style="white-space: normal;">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam nec dapibus augue.
          </span>
        </v-btn>

如果仍然太小，您可能需要调整 v-btn 高度。