texto dentro de {{pago.lastappointment}} si es demasiado largo irá más allá de los bordes de la tarjeta ¿hay algún truco para seguir los bordes de la tarjeta (el texto se ordenará en líneas cuando no haya más ancho para acomodar todo el texto)?

 <q-card-section> <div class="row "> <div class="col-8 col-shrink "><div style= "min-width: 200px; width: 200px" class="text-container">Work Done: {{payment.lastappointment }}</div></div> <div class="col-4"></div> </div> <div class="text-caption text-right text-grey">{{paymentdateAdded(payment.paymentdate)}}</div> <div v-if="$q.screen.gt.xs"> <div><q-badge color="green" >Money Paid: {{formatPrice(payment.moneypaid)}} {{payment.currencypaid}}</q-badge></div> <div><q-badge color="orange" >Total To Pay: {{formatPrice(payment.moneyhavetopay)}} {{payment.currencyhavetopay}}</q-badge></div> </div> <div v-else> <div><q-badge color="green" >Paid: {{formatPrice(payment.moneypaid)}} {{payment.currencypaid}}</q-badge></div> <div><q-badge color="orange" >Total: {{formatPrice(payment.moneyhavetopay)}} {{payment.currencyhavetopay}}</q-badge></div> </div> </q-card-section>