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

i following code here in can play wheel of fortune-like game 1 person (more of test of javascript objects).

my issue when screen small enough, lines not seem break correctly.

for example:

where circle is, have "blank" square. reason why have blank square when screen big enough, square serves space between words.

is there way in code efficiently know if blank square @ end of line , not show it, , window gets resized, show accordingly?

the thought had add window.onresize event measure how big words related how big playing space , decide based on fact, seems inefficient.

this code creating 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";     (var = 0; < 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"; }; 

instead of javascript, sounds more job css, solves problem time when dealing centered text.

consider this:

css

#board {     text-align: center;     border: 1px solid blue;     font-size: 60pt; }  .word {     display: inline-block;     white-space: nowrap; /* don't break words */     margin: 0 50px; /* 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 fiddle (try resizing output pane).