时间戳

首页 > 解决方案 > Vuetify：如何在同一行对齐图标和长文本？

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

问题描述

在我的 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. 文本

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

谢谢！

标签： vuetify.js

解决方案

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

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

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

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

推荐阅读