CODEWITHSUNDEEP
cssvue.jstruncateellipsis
PineCone
PineCone

Reputation: 2343

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

I am working with a component which would render two <li> item, in which the following structure is displayed. I need to truncate the item text on small screens (for mobile mainly): 

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

NavigationItem.vue is as follows: 

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

I have used the following CSS: 

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

But the truncation doesn't work at all. What could I be doing things wrong?

Upvotes: 1

Views: 7277

Answers (1)

fvrab
fvrab

Reputation: 727

Try to add following css to .navigation-item__link_text

width: 85%;
display: inline-block;

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

Upvotes: 1

Related Questions