Javascript-форум (https://javascript.ru/forum/)
-   Events/DOM/Window (https://javascript.ru/forum/events/)
-   -   Обернуть каждый символ в DIV (https://javascript.ru/forum/events/61401-obernut-kazhdyjj-simvol-v-div.html)

Teamur 16.02.2016 22:24
Обернуть каждый символ в DIV
 
Дано:
<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>';
  }
}


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

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

Teamur 16.02.2016 22:36
рони,
вы хотите проверить, знаю ли я обычные массивы, а не возможности ES6? :yes:
Я не проверял, но не уверен, что поможет.
Вроде как, если в теге стоят одни пробелы, браущер их не отобразит, если только не использовать неразрывные пробелы или другие выкрутасы. Верно?

рони 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 16.02.2016 23:03
Господи, рони,
столько красоты )))

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

рони 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 17.02.2016 18:54
Благодарствую!


Часовой пояс GMT +3, время: 09:31.