Add a title property to elements with text-overflow: ellipsis

Question

I am not sure if this is easily possible, but I thought I would ask just in case:

I am using the following CSS rules on a list of text:

{ 
    width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
}

As expected, any text that goes outside the list will be truncated and have an ellipsis placed on the end.

I want to have an active title property for only those list items that trigger the text-overflow rule on the list. So you can hover the mouse over any text that is truncated and see a tooltip of its full text.

Something tells me this is difficult, if not impossible, to do. However I would love to be proven wrong. I am preferably looking for a solution that uses as little JavaScript as possible.

Answer 1

We use a similar, more generic ellipsify, which works perfectly for most cases. We also apply the title attribute (for all elements). Only applying the title if the element ellipsifies, is indeed difficult. The example below assumes that, if the element has the same width as the parent, we should set the title. Without the if statement it would always apply the title.

document.querySelectorAll('.ellipsify').forEach(function (elem) {
  if (parseFloat(window.getComputedStyle(elem).width) === parseFloat(window.getComputedStyle(elem.parentElement).width)) {
    elem.setAttribute('title', elem.textContent);
  }
});

.ellipsify {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    max-width: 100%;
    display: inline-block;  
}

div {
  width: 100px;
}

<div>
  <span class="ellipsify">dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna</span>
  <span class="ellipsify">dolor sit amet</span>
</div>

Answer 2

You can measure for the presence of overflow with a little JavaScript and only add the title attribute if it the element would have overflowed (had it not been truncated).

• Constrain the content with a style.
• Copy the content into a hidden test element with the same width.
• Don't limit wrapping on the test element, allowing it to overflow.
• Compare the heights.

$(".smart-overflow").each(function() {

  var elementToTest = $(this),
    contentToTest = $(this).text(),
    testElement = $("<div/>").css({
      position: "absolute",
      left: "-10000px",
      width: elementToTest.width() + "px"
    }).appendTo("body").text(contentToTest);

  if (testElement.height() > elementToTest.height()) {
    elementToTest.attr("title", contentToTest);
  }
});

.smart-overflow {
  width: 100px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="smart-overflow">
  short text
</div>
<div class="smart-overflow">
  short text
</div>
<div class="smart-overflow">
  Longer text; there should be a tooltip here.
</div>
<div class="smart-overflow">
  More long text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vestibulum lorem eget justo tempus posuere. Integer ac sagittis nisi. Phasellus eu malesuada sapien. Aliquam erat volutpat. Nunc aliquet neque sagittis eros ullamcorper,
  blandit facilisis magna gravida. Nulla a euismod turpis.
</div>
<div class="smart-overflow">
  More long text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vestibulum lorem eget justo tempus posuere. Integer ac sagittis nisi. Phasellus eu malesuada sapien. Aliquam erat volutpat. Nunc aliquet neque sagittis eros ullamcorper,
  blandit facilisis magna gravida. Nulla a euismod turpis.
</div>
<div class="smart-overflow">
  short text
</div>
<div class="smart-overflow">
  short text
</div>

_{jQuery used here for conciseness, but certainly not required.}