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 显示正确的数据，但省略号完全消失。
• 我们已经通过搜索 SO 寻找“方向”解决方案来达到这一点。它似乎适用于不错的浏览器。

非常感谢任何帮助。这是一个相当大的挑战。

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

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

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>