带有文本溢出的一行中的inline-block元素：长字符串

Question

我想在inline-block元素之后放置inline元素，以防需要处理在末尾有省略号的非常长的字符串。

示例是下一个：

＆＃13;

＆＃13;

.container {
  width: 400px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.inline-text {
  display: inline;
}
.inline-red-icon {
  display: inline-block;
  width: 20px;
  height: 20px;
  background: red;
}

＆＃13;

<div class="container">
  <div class="inline-text">
    Onelongstringonelongstringonelongstringonelongstringonelongstringonelongstring
  </div>
  <div class="inline-red-icon">
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

在单行和多行的情况下，它为常规长度字符串提供了良好渲染的结果：

但是对于很长的字符串，inline-block将在下一行移动：

这是jsfiddle：https://jsfiddle.net/xrkpspfr/4/

我试图将此inline-block放在最后一个字符之后，因此在非常长的字符串的情况下应将其放在省略号之后。但是在这个时候我只能想到基于JS的解决方案，它应该计算最后一个字符的位置并对inline-block元素的位置进行一些操作。如果您需要一些响应行为，情况会更糟。

是否有HTML + CSS方法在省略号之后放置描述的红色inline-block元素而没有换行符？

更新：只有在您不需要支持多行字符串时才会有解决方案（感谢@wadber）：使用white-space:nowrap;和{{1在两种情况下 - 文本块和红色方块。 请参阅以下答案：https://stackoverflow.com/a/39409698/2474379

Answer 1

尝试将此css规则添加到.container：

set JAVA_OPTIONS=%JAVA_OPTIONS% -DUseSunHttpHandler=true

此处更新JSFiddle来自vivekkupadhyay