调整大小时避免在两个单词之间换行

Question

我有一个字符串，我需要它不要在不同的行中打断两个特定的单词。示例：

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

当我调整 window 的大小并使其变小时，有一刻它会输出：

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

我希望T-2 + Rate永远在一起。怎么做？

Answer 1

您使用 不间断 space。它的 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>

Answer 2

如 MDN 所述，仅对不间断的部分使用 <span style="white-space: nowrap">。

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

调整大小时避免在两个单词之间换行

Avoid breaking line between two words when resizing

html

css

string

text

line-breaks