在内联块

Question

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

有时，此文本将比容器更宽。当发生这种情况时，我希望它突破到下一行（如下面的第一个例子所示）。

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

我可以通过将inline-block元素和文本的第一个字母包装在<nobr>元素中来解决这个问题（如第三个示例中所示 - 或等效的white-space:nowrap包装器） ，但这似乎是一种非常丑陋的事情。有没有更好的方法呢？

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

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

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

仍然很难看，但绝对不那么难看！它至少适用于Firefox和Chrome。