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说明了其工作原理。

Answer 2

您可以使用.text-truncate provided by 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上。 The documentation states that this is for buttons。

Vuetify：如何在同一行上对齐图标和长文本？

2 个答案: