css - 使用 CSS 强制元素位于第二行，但如果第一项太长，则通过换行文本缩进

Question

我尝试了很多东西，也许没有 JavaScript 就不可能。我想要的是以下内容。考虑两个元素(例如，包裹在 <span> 标签中的句子):

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

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

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.

是否可以将第二个元素强制到第二行，但如果第一个元素在它后面包裹 float ？

编辑:

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

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;
}

这是一个 example