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 没有缩进/间隔， 一个简单的li {display: inline;}方法将不起作用（一些框架——比如 GatsbyJS——自动“挤压”HTML）：

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

（小提琴示例）

标签： htmlcsswhitespaceword-wrapline-breaks

Answer 1

正如 Temani 已经说过的那样li {display: inline;}工作正常。（小提琴）