css - 什么时候 "preferred minimum width"大于 CSS 中的 "available width"？

Question

来自 CSS 2.1 规范，

the shrink-to-fit width is: min(max(preferred minimum width, available width), preferred width).

当可用宽度 <= 首选最小宽度 <= 首选宽度时，使用的宽度将是首选最小宽度。

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

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

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>

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