How can I find out when there is a new line on the Wheel of Fortune?

Question

I have the following code here in which you can play the Wheel of Fortune as a one-person game (more than my test for javascript objects).

My problem is that when the screen is small enough, the lines do not seem to break correctly.

For example:

Where is the circle, I have an "empty" square. The reason why I have an empty square is because when the screen is large enough, the square serves as a space between words.

Is there a way in my code to effectively know if an empty square is at the end of the line and not show it, and then the window changes to show it accordingly?

The only thing I had was to add a window.onresize event, which will measure how big the words are related to how big the playground is and decide based on this fact, but it seems very inefficient.

This is my code to create a playing field (starts @ line 266 in my violin ):

 WheelGame.prototype.startRound = function (round) { this.round = round; this.lettersInPuzzle = []; this.guessedArray = []; this.puzzleSolved = false; this.currentPuzzle = this.puzzles[this.round].toUpperCase(); this.currentPuzzleArray = this.currentPuzzle.split(""); var currentPuzzleArray = this.currentPuzzleArray; var lettersInPuzzle = this.lettersInPuzzle; var word = document.createElement('div'); displayArea.appendChild(word); word.className = "word"; for (var i = 0; i < currentPuzzleArray.length; ++i) { var span = document.createElement('div'); span.className = "wordLetter "; if (currentPuzzleArray[i] != " ") { span.className += "letter"; if (!(currentPuzzleArray[i] in lettersInPuzzle.toObject())) { lettersInPuzzle.push(currentPuzzleArray[i]); } word.appendChild(span); } else { span.className += "space"; word = document.createElement('div'); displayArea.appendChild(word); word.className = "word"; word.appendChild(span); word = document.createElement('div'); displayArea.appendChild(word); word.className = "word"; } span.id = "letter" + i; } var clear = document.createElement('div'); displayArea.appendChild(clear); clear.className = "clear"; }; 

Answer 1

Instead of JavaScript, this is more like working for CSS, which solves this problem all the time when working with centered text.

Consider something like the following:

CSS

 #board { text-align: center; border: 1px solid blue; font-size: 60pt; } .word { display: inline-block; white-space: nowrap; /* Don't break up words */ margin: 0 50px; /* The space between words */ } .word span { display: inline-block; width: 100px; border: 1px solid black } 

HTML

 <div id="board"> <span class="word"><span>W</span><span>h</span><span>e</span><span>e</span><span>l</span></span> <span class="word"><span>o</span><span>f</span></span> <span class="word"><span>F</span><span>o</span><span>r</span><span>t</span><span>u</span><span>n</span><span>e</span></span> </div> 

Here's the fiddle (try resizing the output window).

Answer 2

Here you go. Uses element.offsetTop to determine if the .space element .space on the same line as its parent.previousSibling.lastChild or parent.nextSibling.firstChild .

Corresponding code

Note. In the violin, I change the background color instead of changing the display so that you can see how it works.

 // hides and shows spaces if they are at the edge of a line or not. function showHideSpaces() { var space, spaces = document.getElementsByClassName('space'); for (var i = 0, il = spaces.length ; i < il; i++) { space = spaces[i]; // if still display:none, then offsetTop always 0. space.style.display = 'inline-block'; if (getTop(nextLetter(space)) != space.offsetTop || getTop(prevLetter(space)) != space.offsetTop) { space.style.display = 'none'; } else { space.style.display = 'inline-block'; } } } // navigate to previous letter function nextLetter(fromLetter) { if (fromLetter.nextSibling) return fromLetter.nextSibling; if (fromLetter.parentElement.nextSibling) return fromLetter.parentElement.nextSibling.firstChild; return null; } // navigate to next letter function prevLetter(fromLetter) { if (fromLetter.previousSibling) return fromLetter.previousSibling; if (fromLetter.parentElement.previousSibling) return fromLetter.parentElement.previousSibling.lastChild; return null; } // get offsetTop function getTop(element) { return (element) ? element.offsetTop : 0; } showHideSpaces(); if (window.addEventListener) window.addEventListener('resize', showHideSpaces); else if (window.attachEvent) window.attachEvent('onresize', showHideSpaces); 

jsFiddle