我有一个这样的东西：

<div class="container">
    <div class="element">
      My super text <span>something</span>
      <div>Hello world</div>
      anything.
    <div>This is long</div>
  </div>
</div>

具有以下样式：

.container {
  display: block;
  background-color: red;
  width: 50px;
}

.element {
  font-family: monospace;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

如果子元素的大小大于其容器的大小，是否有办法内联显示HTML元素，但使用椭圆形？
如果我只放文本而不是HTML，它会工作得很好，但用HTML就不行了。我试图在element类上放一个display: flex，但点没有显示，一些html元素（如button）在中间被剪切。
可在https://stackblitz.com/edit/js-ow7cqb上测试代码