html - 是否可以锁定某些词在 <p> 中移动

Question

<p>Hello I'm a potato and i like to eat fishes</p>

假设上面的代码显示如下:

你好我是土 bean
我喜欢吃鱼

当我调整大小时它可能看起来像

你好我是
土 bean 和我喜欢
吃鱼

我想要的是“Hello”始终位于“and”的正上方，即使在调整大小时也是如此。

意思是上面的例子会显示:

你好我是土 bean
我喜欢
吃鱼

是否可以不使用 <br> ？

Answer 1

您可以将文本包裹在 span 中并使它们显示 block :

span {
  display:block;      /* makes each span have it's own line */
  white-space:nowrap; /* will keep all the spans on their own line */
}

<p><span>Hello i'm a potato</span> <span>and i like to</span> <span>eat fishes</span></p>