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>

问题：我们希望在div左侧的溢出文本上​​显示省略号。

问题：此解决方案在Chrome和Firefox中运行良好，但在IE或Edge中无法正常运行。省略号正确显示在左侧，但数据从右侧切断，而不是从左侧切断。

尝试：

• 我试图在跨度上添加'float：right'，然后制作 IE / Edge显示正确的数据，但省略号完全消失。
• 我们已经通过搜索“方向”解决方案来达到这一点。它似乎适用于良好的浏览器。

非常感谢任何帮助。这一直是一个挑战。

编辑：这是一个人们可以尝试的东西： https://plnkr.co/edit/AWyzZLhnLbt4DStnU5hW?p=preview

尝试使用@ovokuro发布的文章提供的代码，我们得到chrome来显示这个，这也不好。：

Answer 1

这里有一些尝试使用JS的东西。我没有IE进行测试，但希望它能为你提供一些逻辑可以继续进行。基本思想是测试内容及其容器的宽度，同时一次删除一个字符以查看它何时适合。 （我使用jQuery只是因为它对我来说更快，但你当然不需要它。）

＆＃13;

＆＃13;

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

＆＃13;

.left-ellipsis {
  overflow: hidden;
}

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

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

.left-ellipsis span.ellipsis:before {
	content:"...";
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;