字符串中的单词在中间断开，JS＆amp; CSS

Question

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

例如

  

如果在行尾有7个破折号占位符   分成6个破折号，留在顶线，一个破折号   到底线。

看起来很糟糕。如何防止此行为并将我的猜测值保持为一个字符串？

＆＃13;

＆＃13;

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();
    }
}

＆＃13;

#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;
}

＆＃13;

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

</div>

＆＃13;

＆＃13;

＆＃13;

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

Answer 1

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

＆＃13;

＆＃13;

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();

＆＃13;

#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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

如果你想保持换行符并避免使用虚线来破坏你可以考虑将它们包裹在span内并通过更新你的js使它们成为内联块：

＆＃13;

＆＃13;

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();
  }
}

＆＃13;

#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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

使用CSS word-break：

#WordBox {
    word-break: keep-all;
} 

保持所有字母对之间的中断。 CSS语法：

word-break: normal|break-all|keep-all|initial|inherit;  

请找到文档： https://www.w3schools.com/cssref/css3_pr_word-break.asp