html - 浏览器如何确定在 block 元素/内联元素中的何处放置换行符？

Question

一个具体的例子:

我有一个菜单:一个列表，它在 :hover 其元素上显示子级列表。对于这样一个女儿列表，我没有设置任何特定的宽度或高度。我不想为子列表设置固定宽度，但不希望只要子菜单条目可以放在一行中就出现换行符，但由于某种原因，浏览器确实在每个单词后都换行。

最重要的是，我想知道放置换行符的算法是什么。试图阅读 CSS2.1 规范，至今未能找到答案。 (说明: parent 列表是相对定位的，女儿列表是绝对定位的；没有 float ； parent 列表是内联 block 显示的)。

Answer 1

在 li 单元上设置空格应该可以满足您的要求。

li{white-space:nowrap;}

至于它是如何决定的，它正在将它设置为尽可能小的宽度。在您的情况下， Header 是最宽的单个元素，因此它会在那里中断，如果有一个单词比 header 长，它将达到该单词的宽度。