Усечение текста с помощью многоточия с использованием CSS в Vue.js не работает - PullRequest
Новая
       36

Усечение текста с помощью многоточия с использованием CSS в Vue.js не работает

0 голосов
/ 27 ноября 2018

Я работаю с 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;
 }

Но усечение не работает вообще.Что я могу делать неправильно?

1 Ответ

0 голосов
/ 27 ноября 2018

Попробуйте добавить следующий CSS к .navigation-item__link_text 

width: 85%;
display: inline-block;

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

...