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

Question

一个具体的例子：

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

最重要的是，我想知道放置换行符的算法是什么。试图阅读 CSS2.1 规范，至今未能找到答案。（澄清：父列表是相对定位的，子列表是绝对的；没有浮动；父列表显示为内联块）。

Answer 1

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

li{white-space:nowrap;}

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