CODEWITHSUNDEEP
htmlcssinternet-explorermicrosoft-edge
Peanut
Peanut

Reputation: 2136

Left Ellipsis Overflow on IE/Edge

.left-ellipsis {
  text-align: left;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  direction: rtl;
}

.left-ellipsis span {}


/* Media query for IE only. */

@media screen and (-ms-high-contrast: active),
(-ms-high-contrast: none) {
  .left-ellipsis span {}
}
<strong>With overflowing content</strong>
<br>
<i>Expected to see <strong>1 0002 0003 0004 0005 end</strong></i>
<div style="border: 1px solid #666; width: 200px; padding: 5px;">
  <div class="left-ellipsis">
    <span dir="ltr">123 456 789 0001 0002 0003 0004 0005 end</span>
  </div>
</div>
<br>
<strong>Without overflowing content</strong>
<br>
<i>Expected to see <strong>0002 0003 0004 0005 end</strong> without ...</i>
<div style="border: 1px solid #666; width: 200px; padding: 5px;">
  <div class="left-ellipsis">
    <span dir="ltr">0002 0003 0004 0005 end</span>
  </div>
</div>

Issue: We want to show an ellipsis on our overflowing text on the left side of the div.

Problem: The solution works well in Chrome and Firefox, but doesn't work correctly in IE or Edge. The ellipsis is shown on the left side correctly, but the data is chopped from the right, not from the left.

IE problem

Attempts:

Any help is greatly appreciated. This has been quite the challenge.

Edit: Here's a plunker where people can try things: https://plnkr.co/edit/AWyzZLhnLbt4DStnU5hW?p=preview

Attempting to use the code provided by the article that @ovokuro posted, we get chrome to display this, which is no good either.:

doesnt work either

Upvotes: 4

Views: 1009

Answers (1)

andi
andi

Reputation: 6522

Here's something to try that uses JS. I don't have IE to test on, but hopefully it'll give you some logic to go on either way. The basic idea is to test the widths of the content and its container, while removing one character at a time to see when it fits. (I used jQuery just because it's faster for me, but you certainly don't need it.)

$('.left-ellipsis').each(function() {
	var $span = $(this).find('span');
	if ($span.width() > $(this).width()) {
		$span.addClass('ellipsis');
		while ($span.width() > $(this).width()) {
			$span.text($span.text().substr(1));
		}
	}
});
.left-ellipsis {
  overflow: hidden;
}

.left-ellipsis span {
	white-space:nowrap;
}

.left-ellipsis span.ellipsis {
	float:right;
}

.left-ellipsis span.ellipsis:before {
	content:"...";
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<strong>With overflowing content</strong><br>
<i>Expected to see <strong>1 0002 0003 0004 0005 end</strong></i>
<div class="left-ellipsis" style="border: 1px solid #666; width: 200px; padding:5px;">
	<span>123 456 789 0001 0002 0003 0004 0005 end</span>
</div>
<br>
<br>
<strong>Without overflowing content</strong><br>
<i>Expected to see <strong>0002 0003 0004 0005 end</strong> without ...</i>
<div class="left-ellipsis" style="border: 1px solid #666; width: 200px; padding: 5px;">
	<span>0002 0003 0004 0005 end</span>
</div>

Upvotes: 2

Related Questions