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

这里是example

使用CSS强制项目位于第二行，但如果第一项太长，则通过包装文本缩进

1 个答案: