调整大小时避免在两个单词之间划破界限 [英] Avoid breaking line between two words when resizing

问题描述

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

 在收缩至2016/09/30并以T-2汇率收取费用时请求它
  

当我调整窗口大小并缩小窗口大小时，它会输出：

 在收缩至2016/09/30与T-2签约时收到此费用\ 
费率
  

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

解决方案

您使用不间断空格。它的HTML实体是& nbsp; 。您可能还需要在 T-2 中包含一个不分行连字符（&＃8209; ）：

 在T& 8209; 2 汇率$ b $收缩至2016/09/30 b  

示例：

  var target = document.getElementById（target）; var originalWidth = target.innerWidth || target.clientWidth; var width = originalWidth; tick（）;函数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>在T& 8209; 2& nbsp; Rate< / div>

I have a string and I need it not to break two specific words in different lines. Example:

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

When I resize window and make it smaller there is a moment that it outputs:

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

I would like T-2 + Rate to be always together. How to do it?

解决方案

You use a nonbreaking space. The HTML entity for it is  . You'll probably want a non-breaking hyphen (‑) in T-2 as well:

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

Example:

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>

这篇关于调整大小时避免在两个单词之间划破界限的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！