带省略号的水平 v-card-title？

Question

我正在使用 Vuetify 2.5 并尝试根据 the docs 创建水平卡片，创建 flex-box div 以将标题和副标题浮动到头像的一侧使用d-flex flex-no-wrap.

我希望过长的标题用省略号进行缩减，但是在“水平模式”下 div 的标题和副标题延伸到 v-card 之外，所以溢出指令不会直到 v-card 之外才适用（甚至根本不适用，因为看起来标题框已经长大以容纳完整的标题）：

如果删除了 d-flex，省略号将正常工作：

关于 v-card 元素我错过了什么？

Answer 1

此问题已在 Bugzilla 中引用，简短说明如下：

Basically: flex items will refuse to shrink below their minimum intrinsic width, unless you explicitly specify "min-width" or "width" or "max-width" on them.

因此，您可以通过将 min-width: 0 添加到您的第二个弹性列来解决您的问题。

这是您修改后的代码笔：

...
<v-card
  :color="color"
  dark
>
  <div>
    <div class="d-flex flex-no-wrap">
      <v-avatar
        class="ma-3"
        size="125"
        tile
      >
        <v-img :src="src"></v-img>
      </v-avatar>
      <div style="min-width: 0">
        <v-card-title class="headline">
          <div class="truncate">{{ title }}</div>
        </v-card-title>
        <v-card-subtitle v-text="artist"></v-card-subtitle>
      </div>
    </div>
</v-card>
...

适用于 Chrome 88 和 Firefox 86。

带省略号的水平 v-card-title？

Horizontal v-card-title with ellipsis?

vuetify.js

ellipsis