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

Question

我正在使用 Vuetify 2.5 并尝试按照 the docs 创建水平卡片，创建一个弹性框 div 以使用 d-flex flex-no-wrap 将标题和副标题浮动到头像的一侧。

我希望用省略号将过长的标题连接起来，但在“水平模式”下，带有标题和副标题的 div 会延伸到 v-card 之外，因此溢出指令直到 v 之外才适用-card（甚至根本没有，因为看起来标题框已经增长到可以容纳完整的标题）：

如果d-flex 被删除，省略号可以正常工作：

我对@9​​87654331@ 元素缺少什么？

Here's a codepen 以示例为例。

Answer 1

Bugzilla 引用了这个问题，这里有简短的解释：

基本上：弹性项目将拒绝缩小到其最小固有宽度以下，除非您在它们上明确指定“最小宽度”或“宽度”或“最大宽度”。

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

这是你修改后的codepen：

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