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

Question

一个具体的例子：

我有一个菜单：一个列表，显示女儿名单：将鼠标悬停在其元素上。对于这样的女儿名单，我没有设置任何特定的宽度或高度。我不想为女儿列表设置固定的宽度，但是只要子女菜单条目可以放在一行中，就不希望发生换行，但由于某种原因，浏览器会在每个单词之后进行换行。

最重要的是，我想知道，放置换行符的算法是什么。试图阅读CSS2.1规范，到目前为止未能找到答案。 （澄清：父母列表是相对的，女儿一个 - 绝对;没有浮动;父母列表显示内联块）。

Answer 1

在li单位上设置空格应该可以达到你想要的效果。

li{white-space:nowrap;}

至于它是如何决定的，它将它设置为尽可能小的宽度。在你的情况下，Header是最宽的单个元素，所以它会在那里打破，如果有一个单词长于标题，它将会转到该单词的宽度。