Слова в начале строки, JS & CSS

В настоящее время я пытаюсь написать игру в палач на JS (я новичок в WEB-технологиях), и я столкнулся с моим первым препятствием. Моя строка-заполнитель для слова угадать, то есть строка дефисов и пробелов, пробивает конец элемента div, содержащего его.

Например

Если в конце строки находится заполнитель из 7 штрихов, он разбивается на 6 штрихов, которые остаются в верхней строке, и один штрих, идущий в нижней строке.

Это выглядит ужасно. Как я могу предотвратить такое поведение и сохранить отправку моего предположения в виде одной строки?

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>

Извините, если я пропустил любую другую необходимую часть кода. Я с радостью приму любую помощь, так как я не могу найти ее через Google.

Источник

2 ответа

Решение

Вы можете просто добавить 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 и сделайте их inline-block, обновив ваш js следующим образом:

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>

Источник

Использовать CSS word-break:

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

keep-all Перерывы между парами букв запрещены. Синтаксис CSS:

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

Пожалуйста, найдите документ: https://www.w3schools.com/cssref/css3_pr_word-break.asp

Источник
Другие вопросы по тегам