1

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

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 中。

4

1 回答 1

0

该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/，请注意仍然有 2px 不一致，因为周围的边界这h1

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

  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;在我看来，这有点额外。

于 2013-01-18T20:00:42.100 回答