什么时候“首选最小宽度”大于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使用等。