如何实现含HTML元素的内容超出容器时显示Text-overflow: ellipsis？

HTML代码 #

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

CSS代码 #

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

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

需求：让.element内的HTML元素以inline方式显示，当内容总尺寸超出容器时显示省略号。纯文本场景下样式正常，但包含HTML元素时失效；尝试给.element添加display:flex属性后，省略号不显示，且button等元素会被截断。

问题核心是：.element内的块级子元素（比如<div>）默认会强制换行，导致white-space: nowrap无法生效；而display:flex并不适配当前需求，flex布局下text-overflow: ellipsis的生效逻辑复杂，还会直接截断子元素。

可以通过以下修改实现需求：

修改后的CSS代码 #

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

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

/* 将所有直接子元素转为内联块级，确保在一行排列 */
.element > * {
  display: inline-block;
}

原理说明 #

1. 统一子元素显示规则：通过.element > * { display: inline-block; }，把原本的块级子元素（如<div>）改为内联块级，让所有内容（文本和子元素）都在同一行排列，不会强制换行。
2. 保留省略号生效逻辑：.element的white-space: nowrap、overflow: hidden、text-overflow: ellipsis属性依然生效，当内容总宽度超过容器时，自动隐藏超出部分并显示省略号。
3. 避免元素被截断：内联块级元素会保持自身完整性，不会像flex布局那样直接截断button等元素。

内容的提问来源于stack exchange，提问作者Jason Van Malder