html - 如何在最后可能的空白处换行 HTML 列表

Question

我有一个简单的 HTML 列表:

<ul>
  <li>First Item</li>
  <li>Second Item</li>
  <li>Third Item</li>
</ul>

我想显示具有以下特征的列表:

1. 连续的元素。
2. 列表将有一个最大宽度，超过该宽度后，元素将分到下一行。
3. 元素只能在开头/空格处断开(而不是中间单词)。
4. 每行在断行前应包含尽可能多的文本。

期望的结果:

[   maximum width   ]
First Item * Second
Item * Third Item

失败的尝试:

#1(分词)

[   maximum width   ]
First Item * Second I
tem * Third Item

#2(元素没有正常破损)

[   maximum width   ]
First Item * Second Item
* Third Item

#3(“过早地”换行)

[   maximum width   ]
First
Item * Second Item *
Third Item

更新:如果 HTML 没有缩进/间隔(一些框架——比如 GatsbyJS——自动“压缩”HTML)，一个简单的 li {display: inline;} 将不起作用:

<ul><li>First Item</li><li>Second Item</li><li>Third Item</li></ul>

(Fiddle example)

Answer 1

正如 Temani 所说，li {display: inline;} 工作正常。 ( Fiddle )