在 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

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

Truncating text with ellipsis using CSS in Vue.js doesn't work

css

truncate

ellipsis

vue.js