Words in string break in the middle, JS & CSS

Question

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.

For example

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.

It looks awful. How can I prevent this behavior and maintain my guess sentance as one string?

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 < 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 < 35; i++)
    {
        var element = 'l'+i;
        div_content += '<div class="letter" onclick="check('+i+')" id="'+element+'">'+letters.charAt(i)+'</div>';
    }

    document.getElementById('alfabet').innerHTML = div_content;

    showHiddenWord();
}

String.prototype.Swappo = function(place, sign) {
    if (place > 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 < 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();
    }
}

#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;
}

<div id="container">
    <div id="WordBox"></div>
    <div id="alfabet"></div>

</div>

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.

Answer 1

You can simply add white-space: nowrap; to #WordBox like this :

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 lettersToSwap = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';

for (i = 0; i < word.length; i++)
{
    if (word.charAt(i) != ' ') word1 += '-';
    else word1 += ' ';
}

function showHiddenWord() {
    document.getElementById('WordBox').innerHTML = word1;
}

showHiddenWord();

#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;
  white-space: nowrap;
}

<div id="container">
    <div id="WordBox"></div>
</div>

And if you want to keep line break and avoid dashed word to break you may consider wrapping them inside span and make them inline-block by updating your js like this :

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 < word.length; i++) {
  if (word.charAt(i) != ' ') word1 += '-';
  else word1 += ' ';
}

function showHiddenWord() {
  var r = '';
  for (var i = 0; i < word1.length; i++) {
    if (word1.charAt(i) != ' ') r += word1.charAt(i);
    else r += '</span><span>';
  }
  r = "<span>" + r + "</span>";
  document.getElementById('WordBox').innerHTML = r;
}

showHiddenWord();

window.onload = start;

function start() {
  var div_content = '';

  for (i = 0; i < 35; i++) {
    var element = 'l' + i;
    div_content += '<div class="letter" onclick="check(' + i + ')" id="' + element + '">' + letters.charAt(i) + '</div>';
  }

  document.getElementById('alfabet').innerHTML = div_content;

  showHiddenWord();
}

String.prototype.Swappo = function(place, sign) {
  if (place > 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 < 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();
  }
}

#container {
  margin-left: auto;
  margin-right: auto;
  margin-top: 5em;
  display: grid;
  grid-template-columns: 1fr 1fr;
}

#WordBox {
  grid-area: 1 / 1 / 1 / 3;
  text-align: center;
  font-size: 2.4em;
  min-height: 100px;
}

#WordBox span {
  margin: 0 5px;
  display: inline-block;
}

#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;
}

<div id="container">
  <div id="WordBox"></div>
  <div id="alfabet"></div>
</div>