Vuetify 中带有长文本的芯片答案

【问题标题】：Chip with long text in VuetifyVuetify 中带有长文本的芯片
【发布时间】：2020-08-04 20:23:28
【问题描述】：

我正在使用Vuetify的组件v-chip，当文本太长时它会剪切文本，有什么解决方法吗？

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data() {
    return {

    }
  },
})

<link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">

<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>

<div id="app">
  <v-app>
    <v-chip>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Expedita consectetur suscipit vel! Aliquam, temporibus laborum delectus ea architecto obcaecati laudantium eos sed ducimus cum error repellat voluptatum ullam fugit, officia sit laboriosam vero similique. Voluptatibus provident magnam libero facilis eum in, labore pariatur optio nesciunt culpa, delectus tenetur, sit quod praesentium? Iusto, non ipsam quis aliquid veniam aliquam placeat minima cupiditate expedita enim alias saepe vero autem. Voluptatum doloribus distinctio illo adipisci expedita, sequi maxime aut ratione magnam ipsum velit vero officia odio deserunt pariatur minima! At, magni aliquam! Ipsum impedit non quos fugiat veniam dolorem ad itaque necessitatibus voluptas?
    </v-chip>
  </v-app>
</div>

【问题讨论】：

填充宽度。你想让它换行吗？
@depperm 是的，我想要那个，请注意，即使它填充了宽度，它也不会显示全文，因为它太长了

标签： vue.js vuetify.js

【解决方案1】：

许多替代方法之一是您可以添加省略号并向标题添加全文。因此，您会在悬停时看到截断的文本和全文

<div id="app">
  <v-app>
    <v-chip large>
      <span class="wrapclass" :title="txt">
          {{txt}}
      </span>
    </v-chip>
  </v-app>
</div>

CSS：

.wrapclass {
  max-width: 99%;
  overflow: hidden;
  text-overflow: ellipsis;
}

JS：

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data() {
    return {
      txt: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Expedita consectetur suscipit vel! Aliquam, temporibus laborum delectus ea architecto obcaecati laudantium eos sed ducimus cum error repellat voluptatum ullam fugit, officia sit laboriosam vero similique. Voluptatibus provident magnam libero facilis eum in, labore pariatur optio nesciunt culpa, delectus tenetur, sit quod praesentium? Iusto, non ipsam quis aliquid veniam aliquam placeat minima cupiditate expedita enim alias saepe vero autem. Voluptatum doloribus distinctio illo adipisci expedita, sequi maxime aut ratione magnam ipsum velit vero officia odio deserunt pariatur minima! At, magni aliquam! Ipsum impedit non quos fugiat veniam dolorem ad itaque necessitatibus voluptas?'
    }
  },
})

https://codepen.io/nizantz/pen/NWNWrJL

【讨论】：

【解决方案2】：

在 v-chip 中添加一个类可能会解决这个问题

class="text-truncate"

这将截断带有文本省略号的长文本

更多信息在这里： https://vuetifyjs.com/en/styles/text-and-typography/

【讨论】：

【解决方案3】：

要换行：

.v-chip {
  height: auto !important;
}

.v-chip .v-chip__content {
  max-width: 100%;
  height: auto;
  min-height: 32px;
  white-space: pre-wrap;
}

【讨论】：

【解决方案4】：

像这样向 v-chip 添加样式：

高度：自动

空白：正常

希望它会有所帮助。

【讨论】：