How to check if a title has dots?

Question

Vue.js

There is such a card, you need to show the tooltip only if there are dots, that is, if the title is long and there are dots, we show the tooltip, if there are no dots, we do not show it.

How to check it?

Answer 1

maybe so?
title.indexOf('...') !== -1

Answer 2

Watching how you cut the line. In general, by the number of characters.

Answer 3

The text is apparently cut off by the text-overflow property, so doing a check indexOf('...')on the advice of Aleksey is pointless. Alex
's advice to count characters is hardly acceptable. On the desktop one number, on the tablet another. And tomorrow the font will change in general and it will be necessary to recalculate everything. Try nesting the clipped text in an inner element and comparing the width of that element with the width of the text box itself.

<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;
}