Vuetify V-Card переполнения на IE11

Question

Я пытаюсь использовать v-карту с vuetify 2.x. Карта переполнена в IE11, хотя ее максимальная ширина установлена ​​на 90%.

Я импортировал следующее в main. js для совместимости с браузером.

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

Моя карта определена в шаблоне следующим образом:

<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>   

Answer 1

Попробуйте добавить div тег в содержимое карты, тогда вы можете добавить <br> тег, чтобы добавить новую строку, или добавить стиль CSS (например, свойство word-wrap: break-word) на div тег для предотвращения переполнения содержимого.

пример кода, подобного этому:

<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>