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说明了它是如何工作的。