How can I know when there is a new line on a Wheel of Fortune Board?

Question

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

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

For example:

Where the circle is, I have a "blank" square. The reason why I have a blank square is so that when the screen is big enough, the square serves as a space between the words.

Is there a way in my code to efficiently know if the blank square is at the end of the line and to not show it, and then the window gets resized, to show it accordingly?

The only thought I had was to add a window.onresize event which would measure how big the words are related to how big the playing space is and decide based on that fact, but that seems very inefficient.

This is my code for creating the game board (starts @ line 266 in my fiddle ):

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 sounds more like a job for CSS, which solves this problem all the time when dealing with centered text.

Consider something like this:

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 a fiddle (try resizing the output pane).

Answer 2

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

Relevant Code

Note: In the fiddle I change the background colors instead of changing display so you can see it work.

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