vuetify.js - Vuetify：如何在同一行对齐图标和长文本？

Question

在我的 vue.js 2.5.7 / vuetify": "^1.0.8" 应用程序中，我使用了一张卡片，其标题包含一些文本和文本左侧的图标：

    <v-card class="p-3" tile="true">

        <v-card-title class="headline">
            <v-icon color="teal" class="a_link" v-if="confirm_modal_dialog_icon" left="true">{{ confirm_modal_dialog_icon }}</v-icon>
            {{ confirm_modal_dialog_confirm_text }}
        </v-card-title>

        <v-card-text v-if="confirm_modal_dialog_detailed_text">
            {{ confirm_modal_dialog_detailed_text }}
        </v-card-text>

如果confirm_modal_dialog_confirm_text变量包含长文本，则标题跨越两行：

1. 图标
2. 文本

我可以让图标（左侧）和长文本始终显示在同一行吗？如果是怎么办？

谢谢！

Answer 1

您描述的问题发生是因为文本不适合v-card-title标签内。解决此问题的一种方法是添加以下 css。

使用white-space: nowrap;. 或者你可以添加一个类来v-card-title喜欢这个小代码片段：

.one-line {
  overflow: hidden; 
  text-overflow: ellipsis;
  white-space: nowrap;
}

这个Codepen说明了它是如何工作的。

Answer 2

您可以使用.text-truncate Vuetify 提供的。

<v-card-title class="headline text-truncate">
  <v-icon color="teal" class="a_link" v-if="confirm_modal_dialog_icon">
    {{ confirm_modal_dialog_icon }}
  </v-icon>
  {{ confirm_modal_dialog_confirm_text }}
</v-card-title>

另外我认为您可以left="true"将v-icon. 文档说明这是用于按钮的。