什么时候“首选最小宽度”大于 CSS 中的“可用宽度”？

Question

来自 CSS 2.1 规范，

收缩到适合的宽度是：min(max(首选最小宽度，可用宽度)，首选宽度)。

当可用宽度

但是，规范还解释说，首选最小宽度是盒子可以采用的最小宽度，通过尝试所有可能的换行符不会导致内容溢出。

那么在什么情况下“首选最小宽度”大于“可用宽度”呢？有人可以举个例子吗？谢谢

Answer 1

可用宽度是容器的一个属性。首选宽度和首选最小宽度是内容的属性。如果部分内容没有大于容器宽度的换行机会，则首选最小宽度将大于可用宽度。最明显的情况是内容的单词很长。

div { /* This is the container that determines the available width */
  width : 200px; 
  background-color:lightblue;
  font-size: 24px;
}

p { /* This block's width is determined by the shrink-to-fit algorithm */
  display:inline-block; 
}

<div>
  <p>
     Opposition to the disestablishment of the Church of 
     England is called antidisestablishmentarianism.
  </p>
</div>

在可用宽度内可能不存在换行机会的其他原因是内容中存在内联块、在单词之间使用不间断空格、white-space:pre 使用等。