包装时在行的开头维护空格

Question

HTML包装，以便每个新行以文本开头。

例如，给定以下div，第一个开始后的每一行，字母为O，无论屏幕宽度如何：

div {
  font-size: 30pt;
  white-space: pre-wrap;
}

<div>
              O O            O   O        O  O OO                   O          O O             O O              O          O                               O
</div>

是否有HTML / CSS方式包装div以便新行可以以空格开头？

我能想到的最好的方法是使用JavaScript将div拆分为单字符宽的跨度，左浮动，并将空格更改为不间断的空格：

div, span {
  font-size: 30pt;
  float: left;
}

var div= document.getElementsByTagName('div');
var data= div[0].innerHTML.split('');
var s = '';
for(var i = 0 ; i < data.length ; i++) {
  s+= '<span>'+data[i].replace(' ','&nbsp;')+'</span>';
}
div[0].innerHTML= s;

然而，这会产生很多DOM元素。

Fiddle