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

Question

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

1

Я в настоящее время пытаюсь написать игру в палату в JS (я новичок в веб-технологиях), и я столкнулся с первым препятствием. Моя строка-заполнитель для слова, чтобы догадаться, то есть строка дефисов и пробелов, прорывается через конец содержащего его 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.

0x07 02 нояб. 2017, в 12:45

Источник

Теги:

javascript

css

css-hyphens

2 ответа

0

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

#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

Gilbert Cut 02 нояб. 2017, в 11:48

Ещё вопросы

Temani Afif · Accepted Answer · 2017-11-02T10-56-00.000Z

Вы можете просто добавить 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 следующим образом:

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>

Но тогда он выйдет за пределы моего div, и все, что я хочу, это просто переместить все пунктирное слово в нижнюю строку, а не только его часть.
@ 0x07 Хорошо, я собираюсь обновить мой ответ!
@ 0x07 обновил мой ответ, проверьте пожалуйста! я добавил часть для того, что вы хотите
Ваш код работает как задумано, спасибо! НО в моем случае это не может сделать работу из-за остальной части моего кода JS (я обновил его в своем вопросе). Проблема в том, что мне нужно заменить пунктир в слове var на буквы, так как пользователи будут угадывать их. Проверьте мое обновление для деталей.
@ 0x07 вы все еще можете сделать это с моим решением, так как я просто заменил пробелы на span чтобы пунктирная линия все еще присутствовала, и вы можете изменить их без проблем, я не думаю, что это будет проблемой (я не вижу ваши обновления)
Извините за сделки, но я должен перевести имена переменных с моего основного языка на английский, чтобы вы не запутались. И это вызывает много проблем, когда дело доходит до выполнения кода;).
@ 0x07 У вас все еще есть проблема, вы можете исправить ее, и я помогу вам обновить ее с помощью моего решения
Спасибо за ваше терпение, но я не могу понять, в чем проблема неработающего кода, который я переписываю здесь. Он работает в моем браузере после запуска его из файла HTML. Я в замешательстве и понимаю, что ваше терпение не останется навсегда.
@ 0x07 вам не хватает HTML, я не вижу элемента с идентификатором alfabet
Да, я понял это после прочтения всего кода еще раз. Благодарю.
@ 0x07 извините, это немного глючит, я исправлю это;)
@ 0x07 проверьте еще раз мой ответ, он должен работать нормально, и вы поймете, что я изменил :)
Я вижу только свойство width отсутствует (я слепой?). И это не то решение, которое я ищу, потому что будет еще один div с графическим изображением, оставленным для alfabet div, и оба должны иметь одинаковую ширину (половину 900 пикселей). Я не упоминал об этом, извините за это.
@ 0x07 Я просто убрал ширину, чтобы мы могли увидеть результат здесь, так как он меньше, чем 900px, но вы можете добавить его, это только CSS. Я сосредоточился только на части JS и span я добавил
Сэр, вы мне благодарны. Ваше решение идеально соответствует моим потребностям! Я также проверил его на других строках, и он работает как задумано. Спасибо за ваше участие и за ваше терпение! Изменить: более того, я могу понять ваш код и то, что вы сделали, так что знания останутся со мной навсегда. Еще раз спасибо.
@ 0x07 было приятно и приятно, что вы узнали что-то новое;) вы также можете принять ответ, чтобы закрыть тему