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中无法正常运行。省略号正确显示在左侧，但数据是从右侧截取的，而不是从左侧截取的。

尝试：

我尝试在 span 中添加一个 'float:right'，这使得 IE/Edge 显示正确的数据，但省略号完全消失。
我们通过搜索 'direction' 解决方案达到了这一点。它似乎适用于良好的浏览器。

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

编辑： 这是一个人们可以尝试的插件： 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>

IE/Edge 上的左省略号溢出

Left Ellipsis Overflow on IE/Edge

html

css

internet-explorer

microsoft-edge