在 Vue.js 中使用 CSS 截断带有省略号的文本不起作用

Question

我正在使用一个component，它将呈现两个<li>项目，其中显示以下结构。我需要在小屏幕上截断项目文本(主要用于移动设备(：

<navigation-item>
<span class="navigation-item__link_text">
{{ $t('navigation.content') }}
</span>
<span
class="navigation-item__link-count">{{ contentCount }}
</span>
</navigation-item>

NavigationItem.vue如下所示：

<template>
<router-link
:to="`/${page}/`"
class="navigation-item"
tag="li">
<a class="navigation-item__link" tabindex="0">
<slot />
</a>
</router-link>
</template>

我使用了以下CSS:

.navigation-item__link_text {
width:100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}

但是截断根本不起作用。我做错了什么？

Answer 1

尝试将以下css添加到.navigation-item__link_text

width: 85%;
display: inline-block;

https://codepen.io/frantisekvrab/pen/GwXpoB