How to make text wrap to next line in Vuetify.js

Issue

I am trying to add a large block of text to an HTML element, but the text all remains a single line, going off the right side of the screen, rather than wrapping to multiple lines. Not sure if this is a regular HTML/CSS problem or a Vuetify problem.

<v-flex>
    <v-card>
        <v-container>
            <p>
                 {{ stringToDisplay }}
            </p>
        <v-container>
    </v-card>
</v-flex>

Solution

You can use text-wrap / text-no-wrap class.
Something like below :

<v-flex>
    <v-card>
        <v-container>
            <p class="text-wrap">
                 {{ stringToDisplay }}
            </p>
        <v-container>
    </v-card>
</v-flex>

Answered By – Pratham

Answer Checked By – Cary Denson (AngularFixing Admin)