有没有办法设置自动换行断点？

Question

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

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

我要显示的区域是固定宽度，如果用户名太长，可以像这样缩短时间：

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

我希望有时间包装AM / PM

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

是否可以设置一个断点或类似的概念来告诉页面它可以在日期和时间之间中断，而不能在时间和AM / PM之间中断？

Answer 1

包装范围中的每个元素并不允许破损

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>

Answer 2

实际上，您需要的是不间断空格的 真实 目的

>

所以只需尝试：HH：MM＆PM