在IE11上验证v卡溢出

Question

我正在尝试在vuetify 2.x中使用v卡。即使最大宽度设置为90％，该卡也会在IE11上溢出。

为了与浏览器兼容，我在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

尝试在v卡内容中添加div标签，然后可以在<br>标签上添加word-wrap: break-word标签以添加新行，或添加CSS样式（例如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>