Vuetify v-card overflows on IE11

Question

I am trying to use a v-card with vuetify 2.x. The card overflows on IE11 even though its max-width is set to 90%.

I imported the following in main.js for browser compatibility.

import Es6Promise from 'es6-promise';
import 'babel-polyfill';
Es6Promise.polyfill();

My card is defined in the template as follows:

<template>
  <v-layout column>
     <v-card class="mx-auto pa-4" max-width="90%">
      <v-card-title>Test</v-card-title>
       <v-card-text class="text-justify">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent
       </v-card-text>
     </v-card>
    </v-layout>
</template>

Zhi Lv Zhi Lv · Accepted Answer · 2020-01-31T08:31:15

Try to add div tag in the v-card content, then you could add <br> tag to add new line, or add CSS style (such as the word-wrap: break-word property) on the div tag to prevent content overflow.

sample code like this:

<div id="app">
      <v-app id="inspire">
        <v-card class="mx-auto" max-width="344" >
          <v-card-text>
            <div>Word of the Day</div>
            <p class="display-1 text--primary">
              be•nev•o•lent
            </p>
            <p>adjective</p>
           <div class="text--primary">
              well meaning and kindly.<br>
              "a benevolent smile"
            </div>
          </v-card-text>
          <v-card-actions>
            <v-btn text color="deep-purple accent-4" >  Learn More </v-btn>
          </v-card-actions>
        </v-card>
      </v-app>
    </div>

Vuetify v-card overflows on IE11

1 Answers