调整大小时避免在两个单词之间分开

时间:2016-09-21 09:01:11

标签: html css string text line-breaks

我有一个字符串,我需要它不要在不同的行中打破两个特定的单词。例如:

"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永远在一起。怎么做?

2 个答案:

答案 0 :(得分:23)

您使用不间断空格。它的HTML实体是 。您可能还需要‑中的非破解连字符(T-2):

Ask for it it when contracting until 2016/09/30 with T‑2 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>

答案 1 :(得分:8)

只需使用<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>