Html 文本溢出不适用于具有水平框方向的框显示

我正在使用方框显示，但我无法使文本正确呈现省略号。现在，文本刚刚溢出包含的元素

HTML:

示例如下：

我尝试过将h1封装在div中，将h1更改为div，等等，但似乎没有任何效果。我知道我可能遗漏了一些明显的东西，有什么想法吗

---

注意：这段代码是从一个名为qooxdoo的JavaScript库生成的，因此我无法对结构进行太多更改。我可以将h1更改为不同的元素，也可以根据需要将h1包装在div中。

由于

没有包装，h1

标记被视为一行很长的文本，这就是它发生的时间如此长的原因，因为文本和溢出无法应用于它。考虑例子：

.no-wrap {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
}

因此，

h1

被迫占据父容器的整个宽度并应用溢出

UPD：稍微靠近一点的解决方法是定义两个元素的实际宽度，对代码的影响可能很小，注意仍然有2px不一致，因为

h1

如果您真的需要保留该边界，有两种解决方法：

一个使用

框大小：边框框属性到
h1

另一个需要另一个

div

进入

h1

样本代码

---

但是，我觉得修改代码可以使事情变得更简单，尤其是

display:box在我的位置有点多余。
h1占据所有宽度，你可以控制css吗？是的，我可以控制css，我还可以将h1更改为其他元素。我将h1改为div，并将其宽度设为100%。现在的问题是，正确的容器仍然在Chrome中溢出。看起来它溢出了左侧容器的大小。在firefox中没有变化。我已经更新了JSFIDLE。这只是一个线索，请参阅更新后的帖子，希望能对您有所帮助。谢谢您的回复！我不介意把孩子们的百分比放在div里，但我不愿意。通过在正确的容器上使用box flex，我找到了一种不必这样做的方法。另外，我没有使用h1，而是将其更新为div。请参阅我的JSFIDLE谢谢您的帮助，我会在实现更改时让您知道它是如何进行的。不客气，您的最后一把小提琴在Chrome中看起来不错，但在IEs甚至IE10中都没有。尽管承认这是最前沿的，但如果没有必要支持微软的家伙们，那你就很好了：）我们正在使用qooxdoo+phonegap为我们的应用程序制作一个移动版本。只要安卓、ios和bb10正常工作，我就不太担心IE；）
.outer {
  width: 400px;
  border: 1px solid black;
}
.hbox {
  -moz-box-orient: horizontal;
  -webkit-box-orient: horizontal;
  box-orient: horizontal;
  display: -moz-box;
  display: -webkit-box;
  display: box;
}
.left-container {
  border: 1px solid red;
}
.no-wrap {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
h1 {
  border: 1px solid green;
}

.no-wrap {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
}

h1 {
  box-sizing: border-box;
  border: 1px solid green;
  width: 80%;
}