vue.js - 文字写在卡外

Question

这是一个监控员工的项目，这个项目的第一个界面是登录界面。

当用户按下注册按钮时，他们必须验证发送给他们的电子邮件。

这是一种验证电子邮件的形式，但文本是写在卡外的。

我该如何解决这个问题？

ConfirmEmail.Vue:

<template>
  <v-container>
    <v-layout row class="padding mb-7">
      <v-flex xs3 sm5 offset-sm3>
        <v-card
          class="mx-auto mt-5 pa-5 text-center secondary text-no-wrap"
          max-width="1000px"
          max-height="2000px"
          id="limited-products"
          outlined
        >
          <v-btn class="ma-2 icon-size" outlined fab color="blue">
            <v-icon large class="icon-size" color="blue darken-2">
              mdi-email
            </v-icon>
          </v-btn>
          <v-layout row class="pt-10">
              <v-flex xs12>
                <div class="text-center phase-style">Verify Your email address</div>
              </v-flex>
            </v-layout>

              <span class="SeparatorRow LoginDefaultView-separatorRow pt-6"
                ><span class="SeparatorRow-horizontalLine"></span
                ><span class="SeparatorRow-horizontalLine"></span
              ></span>

            <v-layout row>
              <v-flex xs12 xs3 sm5 offset-sm3>
                <div>
                  please confirm your email address,to activate your account. if
                you received this by mistakes or weren't expecting it, please
                disgard this email
                </div>
              </v-flex>
            </v-layout>
        </v-card>
      </v-flex>
    </v-layout>
  </v-container>
</template>

<style scoped>
.padding {
  padding-top: 30px;
}

.icon-size{
    font-size: 40px;
}
.phase-style{
    font-size: 26px;
}
.SeparatorRow {
  align-items: center;
  display: flex;
  text-align: center;
}
.SeparatorRow-horizontalLine {
  border-top: 1px solid #e8ecee;
  flex: 1 1 auto;
  margin-top: 8px;
  min-width: 1px;
  padding-top: 8px;
}
.LoginDefaultView-separatorRowLabel {
  color: #cbd4db !important;
  font-size: 16px;
}
</style>

Answer 1

您的 v-card 有 no-text-wrap，这导致您的文本变成一长行。假设有充分的理由不存在，您可以在这种情况下删除它，并在 v-card 上设置一个自定义类，该类具有 overflow: hidden; 或 overflow-y: scroll(垂直滚动)。

.confirm-card {
  overflow-y: scroll;
}