Detect Ellipsis

Asked

Viewed 57 times

2

I have a following div with an image, the title and some options. See:

inserir a descrição da imagem aqui

.truncate {
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
<div class="item thumb">
  <div class="thumbnail"><img src="../img/img.png" />
    <div class="caption truncate" style="width: 100px">
      <span>Negreiros supermercados</span>
    </div>
    <button type="button" class="btn btn-link btn-xs">5 lojas</button>
  </div>
</div>

I would like to hover over the title and have the reservations [...], only if you are reluctant, the full title appears in a Tooltip(for example). What is the simplest way to do this?

javascript css twitter-bootstrap

1 answer

3

The simplest of all would be to pass the text through the title attribute

.truncate {
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
<div class="item thumb">
  <div class="thumbnail"><img src="../img/img.png" />
    <div class="caption truncate" title="Negreiros supermercados" style="width: 100px">
      <span>Negreiros supermercados</span>
    </div>
    <button type="button" class="btn btn-link btn-xs">5 lojas</button>
  </div>
</div>

  • 1

    But then, if the text is showing completely, I wouldn’t need the title attribute

  • 2

    But if the title is displayed in full, no one will need to stop the mouse up to read the title, that won’t make a difference.

  • exact, the fact that the text is completely visible, does not make it necessary to inhibit the title because it is an element that demands a user interaction.

Browser other questions tagged javascript css twitter-bootstrap

You are not signed in. Login or sign up in order to post.