Блог

У меня есть 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;
} 

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

На самом деле, то, что вам нужно, — это реальная цель неразрывного пробела amp; nbsp;

Так что просто попробуйте: HH:MM AM / PM