有没有一种方法可以设置单词换行的断点？

Question

我有一个div，它以以下格式显示名称、日期和时间：

By John Doe on: mm/dd/yyyy HH:MM AM

我显示的区域是固定宽度的，如果用户名太长，则可能会截断时间，如下所示：

By John Doe on: mm/dd/yyyy HH:MM
AM

当我想要时间以上午/下午的形式显示时

By John Doe on: mm/dd/yyyy
HH:MM AM

有没有一种方法可以设置断点或类似的概念，告诉页面它可以在日期和时间之间断开，但不要在时间和AM / PM之间断开？

- user43024

Answer 1

将每个元素包装在一个 span 中，禁止换行。

span {
  white-space: nowrap;
  border: 1px solid grey;
}

div {
  width: 250px;
  margin: 1em auto;
  border: 1px solid red;
}

<div>
  <span>By John Doe on:</span>
  <span>mm/dd/yyyy</span>
  <span>HH:MM AM</span>
</div>

- Paulie_D

Answer 2

实际上，你需要的是不间断空格 的真正作用。

所以只需尝试：HH:MM AM/PM

- Francis