vuetify.js - Vuetify : How to align icon and long text on the same row?

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变量包含一个长文本，标题跨越两行:

图标

正文

我可以使图标(在左侧)和长文本始终显示在同一行上吗？如果是如何？

谢谢!

Answer 1

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

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

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

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