javascript - 带有文本溢出的 CSS 错误：Vuetify 列中的省略号

Question

我正在尝试创建一个显示三列（并且始终是三列）的网页，每列代表一个“状态”，包括一个代表“项目”的卡片列表，如下所示： 但是，如您所见，有些卡片有它们中的对齐错误。我知道罪魁祸首是项目的名称，一些（不是全部）名称较长的项目会出现您在图像中看到的错误 - 用短字符串替换名称会使页面没有错误。

这是呈现列的带有 Vue 的 HTML：

<v-col
    cols="4"
    :id="'status_col_' + allStatuses.indexOf(status)"
    v-for="status in allStatuses.slice(3, 6)"
    :key="status"
>
    <v-card flat dense short class="justify-center vcardstyle">
        ...
    </v-card>
    <v-data-iterator
        ...
    >
        <template v-slot:default="props">
            <draggable group="test" v-model="props.items" @end="updateProjectStatus" :empty-insert-threshold="200">
                <project-card-basic
                    v-for="project in props.items"
                    :id="'project_card_' + project.id"
                    :key="project.id"
                    :project="project"
                    :all-statuses="allStatuses"
                >
                </project-card-basic>
            </draggable>
        </template>

        <template v-slot:no-data>
            ...
        </template>
    </v-data-iterator>
</v-col>

使用子project-card-basic：

<template>
    <v-hover v-slot:default="{ hover }"> 
        <v-card class="cardstyle" :elevation="hover ? 12 : 2">
            <v-card-title>
                <v-row class="wholecard">
                    <v-col align="center" justify="center" class="projname">
                        <v-icon x-small :color="changeColorDependingOnTime()">mdi-checkbox-blank-circle</v-icon>
                    </v-col>
                    <v-col align="left" justify="center" class="refname">
                        NNN_XXX
                    </v-col>
                    <v-col align="left" justify="center" lg="6" class="projname">
                        {{ project.name }}
                    </v-col>
                    <v-col align="right" justify="center" class="priorityCountName">
                        {{ getPriorityCount() }}
                    </v-col>
                    <v-col align="center" justify="center" class="projname">
                        <v-btn text icon :href="getProjectEditURL(project)">
                            <v-icon x-small class="projname">mdi-pencil</v-icon>
                        </v-btn>
                    </v-col>
                </v-row>
            </v-card-title>
        </v-card>
    </v-hover>
</template>

和造型：

.projname {
    font-family: Roboto-Bold;
    font-size: 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: -6.5px;
    padding-left: 0px !important;
    padding-right: 0px !important;
}

.refname {
    font-family: Roboto-Bold;
    font-size: 9px; 
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: -6.5px;
    padding-right: 0px !important;
    padding-left: 0px !important;
    margin-left: -15px;
}

.priorityCountName {
    font-family: Roboto-Bold;
    font-size: 12px; 
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: -6.5px;
    padding-right: 0px !important;
    padding-left: 0px !important;
    margin-right: -10px;
}

.cardstyle {
    margin-left: 10px;
    margin-right: 10px; 
    margin-bottom: 10px; /* Space between each card */
    border-radius: 50px !important;
}

该问题是由文本溢出省略号功能引起的，特别是“空白：nowrap”属性 - 删除它可以完全修复列未对齐。同时，这个错误只发生在 v-col 标签内设置的 cols 属性（这里，在父级中设置为 4）。因此，我不确定错误是由于 CSS 还是由于 Vuetify，因此我已将这个问题标记为两者。我想知道是否有其他人以前见过类似的问题，以及他们如何诊断或解决这些问题？

非常感谢！

标签： javascripthtmlcssvue.jsvuetify.js