Words within a string are divided in the center, with JS and CSS involved

Question

Words within a string are divided in the center, with JS and CSS involved

I'm currently working on developing a hangman game in JavaScript (I am new to web technologies) and I have come across my first challenge. The placeholder string for the word to be guessed, which consists of hyphens and spaces, is overflowing from the containing div.

For instance

If there are 7 dash placeholders at the end of the line, it breaks into 6 dashes staying on the top line and one dash moving to the bottom line.

This display looks messy. How can I prevent this issue and keep my guessing sentence as one continuous string?

var secretWord = 'A random text you need to guess without breaking in the middle of a word';

    secretWord = word.toUpperCase();

    var hiddenWord = '';
    var lettersAvailable = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';

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

    function showHiddenPart() {
        document.getElementById('WordBox').innerHTML = hiddenWord;
    }

    showHiddenPart();
    
window.onload = begin;

function begin(){
    var content_div = '';
    
    for(i = 0; i < 35; i++)
    {
        var element_code = 'l'+i;
        content_div += '<div class="letter" onclick="check('+i+')" id="'+element_code+'">'+lettersAvailable.charAt(i)+'</div>';
    }

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

    showHiddenPart();
}

String.prototype.UpdateChar = function(position, character) {
    if (position > this.length - 1) return this.toString();
    else return this.substr(0, position) + character + this.substr(position+1);
}

function check(number) {
    var selected = false;
    for(i = 0; i < secretWord.length; i++)
    {
        if (secretWord.charAt(i) == lettersAvailable.charAt(number)) {
            hiddenWord = hiddenWord.UpdateChar(i, lettersAvailable.charAt(number));
            selected = true;
        }    
    }
    if (selected == true){
        var identifier = 'l'+number;
        document.getElementById(identifier).style.background = "#003300";
        document.getElementById(identifier).style.color = "#00C000";
        document.getElementById(identifier).style.border = "3px solid #00C000";
        document.getElementById(identifier).style.cursor = "default";
        document.getElementById(identifier).style.boxShadow = "none";
        showHiddenPart();
    }
}

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

If any important part of the code has been missed out, please let me know. I appreciate any assistance as I have not been able to find a solution through online searches.

javascript css css-hyphens

Answer 1

Answer №1

To ensure that the text does not break in the middle of any word, simply add white-space: nowrap; to #WordBox:

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>

If you want to maintain line breaks and prevent dashed words from breaking, wrap them inside span elements and make them inline-block by updating your JavaScript as follows:

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>

Answer 2

To ensure that the text does not break in the middle of any word, simply add white-space: nowrap; to #WordBox:

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>

If you want to maintain line breaks and prevent dashed words from breaking, wrap them inside span elements and make them inline-block by updating your JavaScript as follows:

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>

Answer 3

Answer №2

To implement CSS word-break property, follow the code below:

#TextContainer {
    word-break: keep-all;
}

The keep-all value prevents breaks between certain characters. Here is the CSS Syntax:

word-break: normal|break-all|keep-all|initial|inherit;

Refer to the documentation for more details: https://www.example.com/cssref/word-break

Answer 4

To implement CSS word-break property, follow the code below:

#TextContainer {
    word-break: keep-all;
}

The keep-all value prevents breaks between certain characters. Here is the CSS Syntax:

word-break: normal|break-all|keep-all|initial|inherit;

Refer to the documentation for more details: https://www.example.com/cssref/word-break

Words within a string are divided in the center, with JS and CSS involved

Answer №1

Answer №2

Similar questions

Enhance Laravel 5 by integrating browserify into the Elixir build process

Algorithm for File Naming

What is the best way to position a button on the right side of the page, ensuring that all text

What steps can I take to condense and tidy up this output into a more compact string?

Steps for displaying innerHTML values conditionally with a pipe

How come a colon within a function's body does not result in an error in JavaScript?

detect and handle errors when deploying the Node.js function

Eliminating fillers dashes from a text

Embellishing Your Website with Unique Cursor Styles

Should the article ID be sent to the ajax file, or should the ajax file retrieve the article ID directly? This dilemma arises in a

Show the chosen value from the dropdown menu on all JSP pages

Can you explain the differences between offsetHeight, clientHeight, and scrollHeight for me?

Leveraging JavaScript variables conditionally within a JSON object

Having trouble navigating the Request and Response handling in Expressjs/Nodejs?

What steps do I need to take in order to show the present value using a range input?

Is there a way to store div content in a PHP Session?

Using Google Maps to trace a line showing the distance traveled

The dropdown feature in Bootstrap 5 seems to be malfunctioning in Angular 12

The functionality of sending a response to a client in Node.js Express seems to be malfunctioning

Why are you leaving a trail of timestamps in your .css files?