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

我有一个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之间中断？

包装跨度中的每个元素并不允许损坏

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

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

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