Question

通常情况下，当你有两个内联元素并调整页面大小时，第二个元素换行到下一页，如下所示：

Second element that line-wraps at the end of the page

但是，有没有办法先将它强行放在自己的行上，然后从那里正常换行？

Second element moved to its own line to look nicer

如果我将第二个元素设置为white-space: nowrap，则此似乎可以正常工作，直到第二个元素太大而无法放在一行上：

Second element moved to its own line to look nicer but then runs off the edge of the page

这就是我想要实现的目标：

Second element moved to its own line to look nicer and then wraps nicely at the end of the page

Second element on the same line

这可以仅使用HTML和CSS来完成吗？

Answer 1

使用display: inline-block;似乎可以解决问题：

span {
    display:inline-block;
}

<span id="first">First Element</span>  <span id="second">Second Element Zombie ipsum reversus ab viral inferno, nam rick grimes malum cerebro.</span>