javascript - 字符串中的单词在中间中断，JS & CSS

Question

我目前正在尝试用 JS 编写刽子手游戏(我是 WEB 技术的新手)，我遇到了第一个障碍。我用于猜测单词的占位符字符串，即一串连字符和空格，突破了包含它的 div 的末尾。

例如

If there is 7 dashes placeholder at the end of the line it breaks into 6 dashes that stay at the top line and one dash which goes to the bottom line.

看起来很糟糕。我怎样才能防止这种行为并将我的猜测句子保持为一个字符串？

var word = 'Some text you have to guess and which should not break in the middle of any word';

    word = word.toUpperCase();

    var word1 = '';
    var letters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';

    for (i = 0; i < word.length; i++)
    {
        if (word.charAt(i) != ' ') word1 += '-';
        else word1 += ' ';
    }

    function showHiddenWord() {
        document.getElementById('WordBox').innerHTML = word1;
    }

    showHiddenWord();

window.onload = start;

function start(){
    var div_content = '';
    
    for(i = 0; i < 35; i++)
    {
        var element = 'l'+i;
        div_content += '<div class="letter" onclick="check('+i+')" id="'+element+'">'+letters.charAt(i)+'</div>';
    }

    document.getElementById('alfabet').innerHTML = div_content;

    showHiddenWord();
}

String.prototype.Swappo = function(place, sign) {
    if (place > this.length - 1) return this.toString();
    else return this.substr(0, place) + sign + this.substr(place+1);
}

function check(nr) {
    var chosen = false;
    for(i = 0; i < word.length; i++)
    {
        if (word.charAt(i) == letters.charAt(nr)) {
            word1 = word1.Swappo(i,letters.charAt(nr));
            chosen = true;
        }    
    }
    if (chosen == true){
        var element = 'l'+nr;
        document.getElementById(element).style.background = "#003300";
        document.getElementById(element).style.color = "#00C000";
        document.getElementById(element).style.border = "3px solid #00C000";
        document.getElementById(element).style.cursor = "default";
        document.getElementById(element).style.boxShadow = "none";
        showHiddenWord();
    }
}

#container
{
    margin-left: auto;
    margin-right: auto;
    margin-top: 5em;
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 900px;
}

#WordBox
{
    grid-area: 1 / 1 / 1 / 3;
    text-align: center;
    font-size: 2.4em;
    min-height: 100px;
}

#alfabet
{
    grid-area: 2 / 2 / 3 / 3;
    min-height: 280px;
    display: grid;
    grid-template-columns: repeat(7, auto);
    grid-row-gap: .5em;
    grid-column-gap: .5em;
    justify-content: center;
    align-items: center;
}

.letter
{
    width: 30px;
    height: 30px;
    text-align: center;
    padding: 5px;
    border: 3px solid gray;
    cursor: pointer;
    border-radius: 12px;
}

<div id="container">
    <div id="WordBox"></div>
    <div id="alfabet"></div>

</div>

抱歉，如果我遗漏了代码的任何其他必要部分。我很乐意接受任何帮助，因为我无法通过谷歌找到任何帮助。

Answer 1

您可以像这样简单地将 white-space: nowrap; 添加到 #WordBox 中:

var word = 'Some text you have to guess and which should not break in the middle of any word';

word = word.toUpperCase();

var word1 = '';
var lettersToSwap = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';

for (i = 0; i < word.length; i++)
{
    if (word.charAt(i) != ' ') word1 += '-';
    else word1 += ' ';
}

function showHiddenWord() {
    document.getElementById('WordBox').innerHTML = word1;
}

showHiddenWord();

#container
{
  margin-left: auto;
  margin-right: auto;
  margin-top: 5em;
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: 900px;
}

#WordBox
{
  grid-area: 1 / 1 / 1 / 3;
  text-align: center;
  font-size: 2.4em;
  min-height: 100px;
  white-space: nowrap;
}

<div id="container">
    <div id="WordBox"></div>
</div>

如果你想保留换行符并避免破折号，你可以考虑将它们包装在 span 中并通过像这样更新你的 js 使它们 inline-block :

var word = 'Some text you have to guess and which should not break in the middle of any word';

word = word.toUpperCase();

var word1 = '';
var letters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';

for (i = 0; i < word.length; i++) {
  if (word.charAt(i) != ' ') word1 += '-';
  else word1 += ' ';
}

function showHiddenWord() {
  var r = '';
  for (var i = 0; i < word1.length; i++) {
    if (word1.charAt(i) != ' ') r += word1.charAt(i);
    else r += '</span><span>';
  }
  r = "<span>" + r + "</span>";
  document.getElementById('WordBox').innerHTML = r;
}

showHiddenWord();

window.onload = start;

function start() {
  var div_content = '';

  for (i = 0; i < 35; i++) {
    var element = 'l' + i;
    div_content += '<div class="letter" onclick="check(' + i + ')" id="' + element + '">' + letters.charAt(i) + '</div>';
  }

  document.getElementById('alfabet').innerHTML = div_content;

  showHiddenWord();
}

String.prototype.Swappo = function(place, sign) {
  if (place > this.length - 1) return this.toString();
  else return this.substr(0, place) + sign + this.substr(place + 1);
}

function check(nr) {
  var chosen = false;
  for (i = 0; i < word.length; i++) {
    if (word.charAt(i) == letters.charAt(nr)) {
      word1 = word1.Swappo(i, letters.charAt(nr));
      chosen = true;
    }
  }
  if (chosen == true) {
    var element = 'l' + nr;
    document.getElementById(element).style.background = "#003300";
    document.getElementById(element).style.color = "#00C000";
    document.getElementById(element).style.border = "3px solid #00C000";
    document.getElementById(element).style.cursor = "default";
    document.getElementById(element).style.boxShadow = "none";
    showHiddenWord();
  }
}

#container {
  margin-left: auto;
  margin-right: auto;
  margin-top: 5em;
  display: grid;
  grid-template-columns: 1fr 1fr;
}

#WordBox {
  grid-area: 1 / 1 / 1 / 3;
  text-align: center;
  font-size: 2.4em;
  min-height: 100px;
}

#WordBox span {
  margin: 0 5px;
  display: inline-block;
}

#alfabet {
  grid-area: 2 / 2 / 3 / 3;
  min-height: 280px;
  display: grid;
  grid-template-columns: repeat(7, auto);
  grid-row-gap: .5em;
  grid-column-gap: .5em;
  justify-content: center;
  align-items: center;
}

.letter {
  width: 30px;
  height: 30px;
  text-align: center;
  padding: 5px;
  border: 3px solid gray;
  cursor: pointer;
  border-radius: 12px;
}

<div id="container">
  <div id="WordBox"></div>
  <div id="alfabet"></div>
</div>