CODEWITHSUNDEEP
htmlvuetify.js
user11718989
user11718989

Reputation:

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

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>

Upvotes: 7

Views: 32580

Answers (3)

Vinicius Santin
Vinicius Santin

Reputation: 620

Now we can use the text-truncate class.

https://vuetifyjs.com/en/styles/text-and-typography/#wrapping-and-overflow

Upvotes: 0

Pwntastic
Pwntastic

Reputation: 481

The solution for my scenario was adding word-break: break-word; to my class. The built in classnames did not do what I needed.

Upvotes: 6

Pratham
Pratham

Reputation: 1713

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>

Upvotes: 14

Related Questions