title: Words in string break in the middle, JS & CSS
body: <p>I'm currently trying to write hangman game in JS (i'm novice in WEB techs) and I've encountered my first obstacle. My placeholder string for the word to guess, that is a string of hyphens and spaces, breaks through the end of the div containing it.</p>
  
  <p><em>For example</em></p>
  
  <blockquote>
    <p>If there is 7 dashes placeholder at the end of the line it
    breaks into 6 dashes that stay at the top line and one dash which goes
    to the bottom line.</p>
  </blockquote>
  
  <p>It looks awful. How can I prevent this behavior and maintain my guess sentance as one string?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var word = 'Some text you have to guess and which should not break in the middle of any word';
  
      word = word.toUpperCase();
  
      var word1 = '';
      var letters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
  
      for (i = 0; i &lt; word.length; i++)
      {
          if (word.charAt(i) != ' ') word1 += '-';
          else word1 += ' ';
      }
  
      function showHiddenWord() {
          document.getElementById('WordBox').innerHTML = word1;
      }
  
      showHiddenWord();
  
  window.onload = start;
  
  function start(){
      var div_content = '';
      
      for(i = 0; i &lt; 35; i++)
      {
          var element = 'l'+i;
          div_content += '&lt;div class="letter" onclick="check('+i+')" id="'+element+'"&gt;'+letters.charAt(i)+'&lt;/div&gt;';
      }
  
      document.getElementById('alfabet').innerHTML = div_content;
  
      showHiddenWord();
  }
  
  String.prototype.Swappo = function(place, sign) {
      if (place &gt; this.length - 1) return this.toString();
      else return this.substr(0, place) + sign + this.substr(place+1);
  }
  
  function check(nr) {
      var chosen = false;
      for(i = 0; i &lt; word.length; i++)
      {
          if (word.charAt(i) == letters.charAt(nr)) {
              word1 = word1.Swappo(i,letters.charAt(nr));
              chosen = true;
          }    
      }
      if (chosen == true){
          var element = 'l'+nr;
          document.getElementById(element).style.background = "#003300";
          document.getElementById(element).style.color = "#00C000";
          document.getElementById(element).style.border = "3px solid #00C000";
          document.getElementById(element).style.cursor = "default";
          document.getElementById(element).style.boxShadow = "none";
          showHiddenWord();
      }
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#container
  {
      margin-left: auto;
      margin-right: auto;
      margin-top: 5em;
      display: grid;
      grid-template-columns: 1fr 1fr;
      width: 900px;
  }
  
  #WordBox
  {
      grid-area: 1 / 1 / 1 / 3;
      text-align: center;
      font-size: 2.4em;
      min-height: 100px;
  }
  
  #alfabet
  {
      grid-area: 2 / 2 / 3 / 3;
      min-height: 280px;
      display: grid;
      grid-template-columns: repeat(7, auto);
      grid-row-gap: .5em;
      grid-column-gap: .5em;
      justify-content: center;
      align-items: center;
  }
  
  .letter
  {
      width: 30px;
      height: 30px;
      text-align: center;
      padding: 5px;
      border: 3px solid gray;
      cursor: pointer;
      border-radius: 12px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="container"&gt;
      &lt;div id="WordBox"&gt;&lt;/div&gt;
      &lt;div id="alfabet"&gt;&lt;/div&gt;
  
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Sorry if I miss any other necessary part of the code. I will gladly take any help since I can't find any via google.</p>