在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