Избегайте разрыва между двумя словами при изменении размера

У меня есть строка, и мне нужно, чтобы она не разбивала два конкретных слова в разных строках. Пример:

"Ask for it it when contracting until 2016/09/30 with T-2 Rate"

Когда я изменяю размер окна и уменьшаю его, наступает момент, когда он выдает:

"Ask for it it when contracting until 2016/09/30 with T-2 \n
Rate"

Я хотел бы, чтобы T-2 + Rate всегда был вместе. Как это сделать?

Ответ 1

Вы используете неиспользуемое пространство. Объект HTML для него -  . Вероятно, вам понадобится не разрывающий дефис (‑) в T-2:

Ask for it it when contracting until 2016/09/30 with T&#8209;2&nbsp;Rate

Пример:

var target = document.getElementById("target");
var originalWidth = target.innerWidth || target.clientWidth;
var width = originalWidth;
tick();
function tick() {
  width = width < 10 ? originalWidth : (width - 10);
  target.style.width = width + "px";
  setTimeout(tick, 400);
}

#target {
  display: inline-block;
  border: 1px solid #ddd;
}

<div id="target">Ask for it it when contracting until 2016/09/30 with T&#8209;2&nbsp;Rate</div>

Ответ 2

Просто используйте <span style="white-space: nowrap"> для неподготовленных частей, как указано MDN.

Ask for it it when contracting until 2016/09/30 with <span style="white-space: nowrap">T-2 Rate</span>