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

93ze6v8z  于 2022-12-14  发布在  Vue.js
关注(0)|答案(4)|浏览(190)

在下面的代码中,按钮应该换行并增加其高度。但是文本与横向边框重叠(该行为在下面的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>
x6492ojm

x6492ojm1#

由于以前没有使用过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>

如果仍然太小,你可能需要调整垂直按钮的高度。

ee7vknir

ee7vknir2#

试试看:

<v-btn
      block
      outline
      >
    <p class="text-wrap" style="width: min-content; margin: auto;">
    Crear Contraseña</p>
    </v-btn>
ebdffaop

ebdffaop3#

在当前的Vuetify 2.6.0+中,多行按钮可以以稍微不同的方式完成。
由于某些原因,您无法覆盖default槽中的<span class="v-btn__content">标记。不幸的是,您的自定义内容被 Package 在此标记中,生成的HTML将如下所示:

但您可以通过以下方式解决问题:

<v-btn
  class="btn-multiline"
  width="150"
  height="50"
>
  <span class="text-wrap">Multiline Button Text</span>
</v-btn>

...

<style>
.btn-multiline > span {
  width: 100%
}
</style>

因此,您只需要定义自定义全局.btn-multiline类,将全宽设置为<span class="v-btn__content">标签,并应用展开到white-space: normal的内部Vuetify text-wrap类。
您可以尝试此解决方案at CodePen

11dmarpk

11dmarpk4#

这里没有内联样式

<v-btn
     block
     color="blue"
     large
     class="no-text-transform pa-10"
     @click="reviewing"
    >
      <p class="text-wrap ma-auto">
       long text here
      </p>
    </v-btn>

相关问题