最快的方式

Question

我们在网站上经常使用一个带连字符的单词，我们从不希望它包装或破坏 - 我们总是希望单词的两个部分在同一行。

有没有办法让网站上这个单词的每个实例都没有中断，或者我是否必须在单词的每个实例的范围内使用"white-space: nowrap"这样的内容？

理想情况下，希望能够进行更新，其中网站上存在的每个单词实例都不会中断，而无需手动更新每个单词。

谢谢！

Answer 1

与non-breaking space  类似，请查看非破解连字符‑：

Hello&#8209;World

这将呈现为Hello‑World，但它不会分成两行。

Answer 2

与Joe提到的一样，您可以遍历您的内容并使用正则表达式来识别和替换您的单词span，该white-space: nowrap适用var keyword = 'some-word', re = new RegExp(keyword,"g"); $('p').each(function() { $(this).html($(this).html().replace(re, '<span class="nowrap">'+keyword+'</span>')) });

这是一个使用jquery的演示。

＆＃13;

.nowrap {
  white-space: nowrap;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>these are words and this is some-word and here are more words these are words and this is some-word and here are more words these are words and this is some-word and here are more words</p>
<p>these are words and this is some-word and here are more words these are words and this is some-word and here are more words these are words and this is some-word and here are more words</p>
<p>these are words and this is some-word and here are more words these are words and this is some-word and here are more words these are words and this is some-word and here are more words</p>

＆＃13;

$var

＆＃13;

Answer 3

这是一个递归地将连字符更改为所有文本节点的非断开连字符的函数：

＆＃13;

function changeHyphens(element) {
  var nodes = element.childNodes;
  for (var i = 0; i < nodes.length; i++) {
    if (nodes[i].nodeType === 1) { //this is an element node
      changeHyphens(nodes[i]);
    } else if (nodes[i].nodeType === 3) { //this is a text node
      nodes[i].nodeValue = nodes[i].nodeValue.replace(/-/g, '\u2011');
    }
  }
} //changeNodes

changeHyphens(document.body);

＆＃13;

<p>
  this-is-a-test this-is-a-longer-test this-is-a-longest-test-that-should-not-break this-is-a-test this-is-a-longer-test this-is-a-test-that-should-not-break this-is-a-test this-is-a-longer-test this-is-a-longest-test-that-should-not-break this-is-a-test
  this-is-a-longer-test this-is-a-test-that-should-not-break
</p>

＆＃13;

Answer 4

最快的方式

在网站上全局替换某些文本的fastest方法是仅遍历DOM树中的文本节点。

您可以使用document.createTreeWalker然后仅替换包含您要更改的单词（或字符）的文本节点来实现此目的。

＆＃13;

var findAndReplaceText = function(el, from, to) {
  if (!el || !from || !to) {
    return;
  }

  var node, nodes = [];
  var walker = document.createTreeWalker(el, NodeFilter.SHOW_TEXT);

  // Find nodes
  while (node = walker.nextNode()) {
    if (from instanceof RegExp) {
      from.test(node.wholeText) && nodes.push(node);
    } else {
      node.wholeText.indexOf(from) !== -1 && nodes.push(node);
    }
  }

  // Change DOM
  while (nodes.length > 0) {
    //nodes[0].replaceWith(
    //  document.createTextNode(nodes[0].wholeText.replace(from, to))
    //);
    nodes[0].textContent = nodes[0].wholeText.replace(from, to)
    nodes.splice(0, 1);
  }
};

findAndReplaceText(document.getElementById('fake-hyphens'), /[\u002d\u2010]/g, '\u2011');
findAndReplaceText(document.documentElement, 'lol', 'non');

// \u2010 - hypen
// \u2011 - non-breakable hyphen
// \u002d - minus

＆＃13;

section {
  float: left;
  line-height: 1em;
  margin-left: 1em;
}

section p {
  width: 200px;
  outline: dashed red 1px;
  padding: 1em;
}

＆＃13;

<section id="fake-hyphens">
  <header>Replace to lol-breakable hyphens</header>
  <p>one-half mother-in-law eighty-six one-third merry-go-round well-being mass-produced over-the-counter daughter-in-law merry-go-round</p>
</section>

<section>
  <header>Without replacement for comparison</header>
  <p>one-half mother-in-law eighty-six one-third merry-go-round well-being mass-produced over-the-counter daughter-in-law merry-go-round</p>
</section>

＆＃13;

是否有可能使网站上的每个单词都不打破？

4 个答案:

最快的方式