如何在最后一个可能的白色 space 上换行 HTML 列表

Question

我有一个简单的 HTML 列表：

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

我想显示具有以下特点的列表：

连续项目。
列表将具有最大宽度，超过该宽度后项目将换行到下一行。
项目只能在开头/空格处断开（不是中间单词）。
每行在断行前应包含尽可能多的文本。

期望的结果：

[   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（换行符"prematurely"）

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

更新： 如果 HTML 没有缩进/间隔，一个简单的 li {display: inline;} 将不起作用（一些框架——比如 GatsbyJS——自动 "squeeze" HTML）：

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

(Fiddle example)

Answer 1

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

Answer 2

这似乎对我有用：

ul {
    max-width: 100px;
}
ul li {
    display: inline;
}
ul li::after {
  content:" ";
}

为什么是 after 部分？

嗯，除非在 HTML source 中的每个 <li> 之后有一个 white-space / new-line，该行不会在项目末尾中断，这很可能会导致 "premature" line-break（如失败的尝试 #3 所示）。一些框架自动 "squeeze" HTML —— 基本上删除了这些 white-space —— 这需要在每个项目之后添加一个明确的 space。

Here's a Fiddle examples（尝试从 css 中删除 after 并查看如何失败尝试 #3）。

如何在最后一个可能的白色 space 上换行 HTML 列表

How to line-break an HTML list on last possible white space

html

css

whitespace

line-breaks

word-wrap