停止使用Javascript在hangman游戏中包装字母

Question

I have made a hangman game using JavaScript. It works the way you would expect, with correct letters replacing the blank "_" that represents the letters. The problem is larger answers on smaller screens are wrapping, which is fine and what I want, but I want the WHOLE WORD to wrap if it doesn't fit, but at the moment, only individual letters wrap.

So for example something like "Tropic Thunder" is appearing like this:

"Tropic Thun

der"

Rather than what I want, which is:

"Tropic

Thunder"

If the word doesn't fit then I want the whole word to wrap and drop under, not just the letters that don't fit.

I think my JavaScript code doesn't differentiate different words from the same answer.

For some reason this text box isn't putting all my code into a block, so to make things easier to read, this is a link to my code in github:

HTML:

https://raw.githubusercontent.com/kaw31/hangman/master/hangman.html

CSS: (I've commented out a bit of code from a previous version so just ignore that);

https://raw.githubusercontent.com/kaw31/hangman/master/css/style.css

JavaScript:

https://raw.githubusercontent.com/kaw31/hangman/master/js/script.js

Any help is much appreciated.

Answer 1

It looks like your code inserts a new <li> element into the DOM for every character of the answer (at guess = document.createElement('li') ). So, the markup will look like this:

<li>f</li><li>o</li><li>o</li><li> </li><li>b</li><li>a</li><li>r</li>

Then, those <li> elements are displayed as inline-block in your CSS (at #my-word li ). Set the CSS display property to inline instead, and the words will break as you expect.

Answer 2

I think what you are looking for is the css property word-wrap: break-word; This should bump the whole word down a line.