html - 防止内联 block 后换行

Question

在一个页面中，我有一个固定宽度的容器，其中包含一个内联 block 元素，后跟一些文本。

有时，此文本会比容器宽。发生这种情况时，我希望它跳到下一行(如下面的第一个示例所示)。

有时，此文本也太宽而无法在容器中显示。发生这种情况时，我希望截断多余部分 ( overflow: hidden )。但是，当我尝试以明显的方式执行此操作时，在内联 block 元素之后插入了一个换行符(如第二个示例所示)。

我可以通过将行内 block 元素和文本的第一个字母包装在 <nobr> 中来解决这个问题元素(如第三个示例中所示——或等效的 white-space:nowrap 包装器)，但这似乎是一种非常丑陋的处理方式。有更好的方法吗？

.container {
  outline: 2px solid blue;
  width: 150px;
  overflow: hidden;
  margin: 10px;
}

.inlineblock {
  display: inline-block;
  width: 30px; height: 1.5em; vertical-align: middle;
  background: gray;
}

<div class="container">
  <span class="inlineblock"></span>line breaks only at spaces
</div>

<div class="container">
  <span class="inlineblock"></span>widetextwidetextwidetext second line
</div>

<div class="container">
  <nobr><span class="inlineblock"></span>w</nobr>idetextwidetextwidetext ugly workaround
</div>

Answer 1

看起来第一个字符不需要在 <nobr> 中元素，所以这将起作用:

<nobr><span class="inlineblock"></span></nobr>wide...

仍然丑陋，但绝对不那么丑陋!它至少适用于 Firefox 和 Chrome。