Detect ellipsis

Question

Detect ellipsis

Navigation

#1 by (3 votes)

2

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

.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 the mouse over the title and have the [...] faults, only if you have ellipses, the full title appears in a Tooltip (for example). Which is the simplest way to do this?

javascript css twitter-bootstrap

asked by anonymous 29.08.2017 / 21:50

1 answer

How to start a textbox with value 0 (zero)? [closed] Display only hours, minutes, and seconds on a chart whose entry is in unix time

score 3 · Answer 1

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>