html - 文本溢出在水平框方向的框显示中不起作用

Question

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

HTML:

<div class="outer hbox">
  <div class="hbox left-container">
    <div class="label no-wrap box-centered">Col1</div>
  </div>
  <h1 class="label no-wrap">really long title really long title really long title really long title really long title really long title really long title really long title really long title</h1>
</div>

CSS:

.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;
}

此处示例:http://jsfiddle.net/bmclachlin/Sq7Xa/

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

注意:此代码是从名为 qooxdoo 的 JavaScript 库生成的，因此我无法对结构进行过多更改。如果需要，我可以将 h1 更改为不同的元素，也可以将 h1 包装在 div 中。

Answer 1

h1 标签被视为一行很长的文本，因为 no-wrap，这就是为什么它只需要像文本一样长的地方并溢出的原因只是无法应用于它。考虑示例:

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

http://jsfiddle.net/Sq7Xa/13/

所以 h1 被迫占据父容器的全宽并应用溢出

UPD:更接近的解决方法是为两个元素定义实际宽度，对代码的侵入很小，看起来像 http://jsfiddle.net/Sq7Xa/15/。 ，请注意，由于 h1

周围的边框，仍有 2px 不一致

如果你真的需要保留那个边界，有几个解决方法:

1. 一个使用 box-sizing: border-box; 属性到 h1 http://caniuse.com/css3-boxsizing

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

2. 另一个需要另一个 div 到 h1 示例代码 http://jsfiddle.net/Sq7Xa/18/

但是，我觉得修改代码可以使事情变得更简单，尤其是 display: box; 在我看来有点多余。