javascript - 我怎么知道命运之轮板上何时有新线？

Question

我下面的代码here您可以在其中与一个人玩类似命运之轮的游戏(我对 javascript 对象的更多测试)。

我的问题是，当屏幕足够小时，线条似乎无法正确断开。

例如:

在圆圈所在的位置，我有一个“空白”正方形。我有一个空白方 block 的原因是当屏幕足够大时，方 block 可以作为单词之间的空间。

我的代码中有没有一种方法可以有效地知道空白方 block 是否在行尾并且不显示它，然后调整窗口大小以相应地显示它？

我唯一的想法是添加一个 window.onresize 事件，该事件将衡量单词的大小与游戏空间的大小相关，并根据该事实做出决定，但这似乎很效率低下。

这是我创建游戏板的代码(从 my fiddle 中的第 266 行开始):

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

与 JavaScript 不同，这听起来更像是 CSS 的工作，它在处理居中文本时始终解决这个问题。

考虑这样的事情:

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>

这是一个 fiddle (尝试调整输出 Pane 的大小)。