Left Ellipse Overflow on IE / Edge

Question

.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>

Run codeHide result

Problem . We want to show the ellipsis on our crowded text on the left side of the div.

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

Attempts :

• I tried adding "float: right" to the range, which then makes IE / Edge show the correct data, but the ellipsis is completely gone.
• We got to this point by clearing SO for the "direction" solution. It seems to work with good browsers.

Any help is appreciated. It was a rather difficult task.

: , -: https://plnkr.co/edit/AWyzZLhnLbt4DStnU5hW?p=preview

, , @ovokuro, , , .:

Answer 1

- , JS. IE , , , . - , , , . ( jQuery , , .)

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

Hide result