使用CSS强制项目位于第二行，但是如果第一项太长，则以换行文字缩进

Question

我已经尝试了很多事情，也许没有JavaScript是不可能的。我想要的是以下内容。考虑两个项目（例如，用<span>标签包装的句子）：

This is the first item in the list of sentences.
This is the second item.

如果第一项包含太多文本，我想将第二项保留在第二行，但要像这样浮动在其后。

This is the first item in the list of sentences, which is really long
and therefore wraps. This is the second item.

我已经尝试将样式white-space: nowrap;应用于第二个项目，但只有第一个项目足够长时，该样式才有效。如果第一项太短，它将看起来像

This is the first item. This is the second item.

是否可以将第二个项目强制放在第二行上，但是如果第一个项目包装在它后面漂浮呢？

编辑：

第一项没有明确的换行符。仅当它太长时，才会因为窗口宽度而被包裹。

Answer 1

如果允许您对父容器设置一些限制，这可能是一个解决方案：

<div>
  <p>This is the first item. This is the second item. </p>
</div>

<div>
  <p>This is the first item in the list of sentences, which is really long
and therefore wraps. This is the second item. </p>
</div>

div {
  max-width: 350px;
}

这是一个例子