text-overflow ellipsis when scrolled is not showing overflown content in Chrome and IE

Question

I'm trying to figure out if there is a way to show the overflown content when the text-overflow is ellipsis and overflow is scroll or auto.

Here's an example link where you can see the overflown content is not shown when scrolled right. But it works on FireFox.

Thanks in advance.

Answer 1

I've come up with a method for emulating text-overflow with scroll in webkit browsers.

It requires JavaScript. My explanation uses jQuery for convenience, but I've also included a vanilla JavaScript solution.

The p element needs to be within a container, like this:

<div class="ellipsis">
  <p>
    Test paragraph with <code>ellipsis</code>...
  </p>
</div>

Use these styles, substituting 300px for your preferred width:

.ellipsis {
  width: 300px;
  overflow-x: scroll;
}

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

This causes the scrollbar to appear on the container rather than the p element.

First, we determine the width of the p and store it like this:

$('.ellipsis p').each(function() {
  $(this)
    .data('width', $(this).css('display','inline-block').width()+10)
    .css('display','');
});

Without display:inline-block, the p has the same width as its container – in this case 300px. inline-block allows p to expand to full width. We add 10 to this width to account for the right-arrow on the scrollbar. We then restore p's default display.

We want p to always have that width, so that the scrollbar will move the full extent of p. However, setting p to that width gets rid of the ellipsis.

The solution? Set p's width to be that of its container's width, and set p's paddingRight to be the difference between p's full width and its container's width.

This works well if the container isn't scrolled. To account for the scrolled position, simply include scrollLeft in the calculations:

$('.ellipsis').scroll(function() {
  $(this).find('p').css({
    paddingRight: $(this).find('p').data('width') - $(this).scrollLeft() - $(this).width(),
    width: $(this).scrollLeft() + $(this).width()
  });
});

jQuery solution:

$('.ellipsis p').each(function() {
  $(this)
    .data('width', $(this).css('display','inline-block').width()+10)
    .css('display','');
});

$('.ellipsis').scroll(function() {
  $(this).find('p').css({
    paddingRight: $(this).find('p').data('width') - $(this).scrollLeft() - $(this).width(),
    width: $(this).scrollLeft() + $(this).width()
  });
});

$('.ellipsis').scroll();

#E1 {
  width: 200px;
}

#E2 {
  width: 400px;
}

.ellipsis {
  overflow-x: scroll;
  border: 1px solid #ddd;
  margin: 2em 0em;
}

.ellipsis p {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  margin: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="ellipsis" id="E1">
  <p>
Test paragraph with <code>ellipsis</code>.  It needs quite a lot of text in order to properly test <code>text-overflow</code>.
  </p>
</div>

<div class="ellipsis" id="E2">
  <p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </p>
</div>

Vanilla JavaScript solution:

document.querySelectorAll('.ellipsis p').forEach(function(self) {
  self.style.display = 'inline-block';
  self.dataset.width = self.clientWidth + 10;
  self.style.display = '';
});

document.querySelectorAll('.ellipsis').forEach(function(self) {
  self.addEventListener('scroll', function() {
    const p = self.querySelector('p');
    const cw = this.clientWidth;
    const sl = this.scrollLeft;

    p.style.paddingRight = (p.dataset.width - sl - cw) + 'px';
    p.style.width = sl + cw + 'px';
  });
});

document.querySelectorAll('.ellipsis').forEach(function(self) {
  self.dispatchEvent(new Event('scroll', {bubbles: true}));
});

#E1 {
  width: 200px;
}

#E2 {
  width: 400px;
}

.ellipsis {
  overflow-x: scroll;
  border: 1px solid #ddd;
  margin: 2em 0em;
}

.ellipsis p {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  margin: 0;
}

<div class="ellipsis" id="E1">
  <p>
Test paragraph with <code>ellipsis</code>.  It needs quite a lot of text in order to properly test <code>text-overflow</code>.
  </p>
</div>

<div class="ellipsis" id="E2">
  <p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </p>
</div>