Comportamiento del texto en el v-btn de Vuetify
Tengo el siguiente conjunto de botones:
<template>
<v-card color="secondary" elevation="6">
<v-card-title>
<v-spacer></v-spacer>
Tres botones
</v-card-title>
<v-divider></v-divider>
<v-card-text>
<v-row>
<v-col cols="12" sm="4" v-for="button in buttons" :key="button.id">
<v-btn color="primary" x-large="" block="">
<span style="word-break: normal !important;">{{button.text}}</span>
</v-btn>
</v-col>
</v-row>
</v-card-text>
</v-card>
</template>
<script>
export default {
data () {
return {
//Este código no es de producción. Los textos de los botones se obtienen a través de una API y su longitud es variable
buttons: [
{id:1, text: "Soy un botón"},
{id:2, text: "Soy otro botón. Bla, bla, bla, bla"},
{id:3, text: "También soy un botón"}
]
}
},
}
</script>
En este ejemplo, los textos están codificados pero realmente los obtengo de una API. Su longitud es variable y no puedo saberla de antemano. Necesito:
1. Que el texto nunca supere el espacio del botón como está sucediendo en el botón 2.
2. Permitir que el texto del botón utilice las líneas que necesite. 1, 2, 10 … dependiendo de su longitud.
Siempre creciendo verticalmente y con un salto de línea como garantizaría la propiedad CSS word-break: normal;
.
3. El ancho del botón permanece fijo ocupando todo el ancho de la columna, ya que la propiedad block
debería lograrlo.
Todo esto debe cumplirse en las vistas de escritorio, tablet y móvil.
Puedes probarlo aquí.
davy.ai
Solución CSS para el desbordamiento y el dimensionamiento de botones
Para evitar que el texto se desborde del botón y asegurar un ancho fijo, podemos establecer la propiedad
white-space
ennormal
y agregar la declaración CSSword-break: break-word
a los estilos aplicados al texto del botón. Además, deberemos establecer un ancho en el botón que lo obligue a expandirse solo verticalmente, lo cual se puede lograr mediantewidth: 100%
ydisplay: block
.Aquí está la solución CSS para el desbordamiento y el dimensionamiento de botones:
Aplicar esta solución al ejemplo de código proporcionado debería resolver el problema de desbordamiento del botón y garantizar tamaños de botón consistentes en todos los dispositivos.