Форум

Teamur · #1 (**permalink**) 16.02.2016, 22:24

Дано:

<div id='box' style='display: flex'>Требуется обернуть каждый символ в DIV</div>

Сделал так:

var i;
var txt = box.textContent;

window.onload = function() {
  for (i of txt) {
    box.innerHTML += '<div>' + i + '</div>';
  }
}

Но, к сожалению, игнорируются пробелы. Как исправить?

рони · #2 (**permalink**) 16.02.2016, 22:29

Teamur,
попробуйте обычным циклом как по массиву

Teamur · #3 (**permalink**) 16.02.2016, 22:36

рони,
вы хотите проверить, знаю ли я обычные массивы, а не возможности ES6?

Я не проверял, но не уверен, что поможет.
Вроде как, если в теге стоят одни пробелы, браущер их не отобразит, если только не использовать неразрывные пробелы или другие выкрутасы. Верно?

рони · #4 (**permalink**) 16.02.2016, 22:51

Teamur,

<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
      #box div{
        padding: 3px;
        background-color: #FF00FF;
         border-radius: 50%;
         width: 20px;
         text-align: center;      }

  </style>
  </head>

<body>
<div id='box' style='display: flex'>Требуется обернуть каждый символ в DIV</div>
 <script>


window.onload = function() {
var txt = box.textContent, html='';
for (var i=0; i<txt.length; i++)  {html+='<div>' + txt[i] + '</div>'}

    box.innerHTML = html;
  }


 </script>
</body>

</html>

Teamur · #5 (**permalink**) 16.02.2016, 23:03

Господи, рони,
столько красоты )))

Teamur · #6 (**permalink**) 16.02.2016, 23:05

рони,
вы добавили пробел засчет Паддинга?
Ну, незнаю. Может быть скриптом найти пробелы, убрать, а на их место поставить блоки div, с классом .space например. И уже в стилях обозначить их ширину? Поможете. Пока такие идеи )

рони · #7 (**permalink**) 16.02.2016, 23:49

Teamur,

<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
      #box div{
        padding: 3px;
        background-color: #FF00FF;
         border-radius: 50%;
         width: 20px;
         height: 20px;
         text-align: center;
         margin:auto 0 ;
      }
   #box div.space{
      background-color: #FFFF00;
       width: 60px;
       height: 60px;
    }
  </style>
  </head>

<body>
<div id='box' style='display: flex'>Требуется обернуть каждый символ в DIV</div>
 <script>


window.onload = function() {

var txt = box.textContent, html='';
for (var i=0; i<txt.length; i++)  {;html+='<div class="'+(txt[i]==' ' ? 'space': '')+'" >' + txt[i] + '</div>'}

    box.innerHTML = html;
  }


 </script>
</body>

</html>

Teamur · #8 (**permalink**) 17.02.2016, 18:54

Благодарствую!

Форум

Справочник

Discord чат

Курсы javascript