@Taifunov

Как проверить есть ли у тайтла точки?

Вот есть такая карточка, нужно показывать тултип лишь при наличии точек, то есть если тайтл длинный и есть точки, показываем тултип, если точек нет, не показываем.5f9a6d2260603241967025.png

Как проверить это?
  • Вопрос задан
  • 56 просмотров
Пригласить эксперта
Ответы на вопрос 3
Kozack
@Kozack Куратор тега Vue.js
Thinking about a11y
Смотря как вы строку обрезаете. В общем случае -- по количеству символов.
Ответ написан
delphinpro
@delphinpro
frontend developer
Текст видимо обрезается свойством text-overflow, поэтому делать проверку indexOf('...') по совету Алексей бессмыслено.
Совет Alex считать символы вряд ли приемлем. На десктопе одно кол-во, на планшете другое. А завтра вообще шрифт поменяется и нужно будет все пересчитывать.

Попробуйте вложить обрезаемый текст во внутренний элемент и сравнивать ширину этого элемента с шириной самого блока с текстом.

<div class="b">
  <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis, mollitia, vitae? Rem veritatis et, fugit minus quod nostrum. Facilis rem unde numquam cupiditate veritatis mollitia velit, voluptatibus labore dicta, aspernatur.</span>
</div>

.b{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}


5f9a7c01f1e53118025018.png
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы