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/，注意由于{{1}周围的边界仍然存在2px的不一致}}

如果您确实需要保留该边框，则可以使用以下几种解决方法：

使用h1属性到box-sizing: border-box; http://caniuse.com/css3-boxsizing
的人
```
h1
```
另一个需要另一个h1 { box-sizing: border-box; border: 1px solid green; width: 80%; }到div示例代码http://jsfiddle.net/Sq7Xa/18/

但是，我觉得通过修改代码可以更简单地完成任务，尤其是h1，这在我的观点有点多了。

文本溢出无法在水平框方向的框显示中工作

1 个答案: