Scrolling text overflow ellipsis does not show overflowing content in Chrome and IE

I have come up with a method to emulate text overflow using scrolling in webkit browsers.

This requires JavaScript. I am using jQuery for convenience, but let me know if you prefer Vanilla JS solution.

The element p

must be inside the container, for example:

<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 in the container and not in the element p

.

First, we define the width 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

, p

has the same width as its container - in this case 300px. inline-block

allows you p

to expand to full width. We add 10 to this width to accommodate the right arrow on the scrollbar. Then we restore p

to default display

.

We want to p

always have this width so that the scrollbar will move in full p

. However, setting p

to this width gets rid of the ellipsis.

Decision? Set p

width

as the width of the container and set p

paddingRight

as the difference between the p

full width and the width of the container.

This works well if the container is not scrolling. To account for the scrolled position, just 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()
  });
});

      

        
        
        
      

    

Code with examples:

$('.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>