Is it possible to make each copy of the word on the site without breaking?

Question

We have a hyphen word that we often use on our website and we never want to wrap it or break it - we always want the two parts of the word to be on the same line.

Is there a way to make every instance of this word on the site unbroken or do I need to do this with something like "white-space: nowrap"in the gap around each instance of the word?

Ideally, I would like to be able to do an update where each instance of a word existing on the site becomes non-revealing, without having to manually switch and update each word.

Thank!

Answer 1

 , ‑:

Hello‑World

Hello‑World, .

Answer 2

, span, white-space: nowrap

jquery.

var keyword = 'some-word',
    re = new RegExp(keyword,"g");

$('p').each(function() {
  $(this).html($(this).html().replace(re, '<span class="nowrap">'+keyword+'</span>'))
});

.nowrap {
  white-space: nowrap;
}

<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>

Answer 3

, :

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);

<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>

Answer 4

- - - DOM.

You can achieve this by using document.createTreeWalkerand then replacing only text nodes containing the word (or character) that you want to change.

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

section {
  float: left;
  line-height: 1em;
  margin-left: 1em;
}

section p {
  width: 200px;
  outline: dashed red 1px;
  padding: 1em;
}

<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>

Run code