Форматирование текста

@OloloshaNub · Регистрация: 14.05.2015

Author24 — интернет-сервис помощи студентам

Доброго времени суток! Прошу помощи, специфика проекта обязует при каких-то обстоятельствах заливать текст в сплошной цвет. Графический пример.

Мое шаманство к необходимому эффекту не привело, может кто сталкивался с подобным? Или знает дебри CSS и мог бы подсказать. Можно и на JS,Jquery не принципиально

Помогите, пожалуйста.

@Fedor92 · 02.04.2016, 00:10

OloloshaNub, ну вот есть такой вариант:

HTML5

<!DOCTYPE html>
<html>
    <head>
    <meta charset='utf-8'>
    <title>Тест</title>
    <style> 
    span{background:#000; margin-right:5px}
    span:first-child{margin-left:0}
    </style>
    </head>
    <body>
<p id="content">Жил - был программист и было у него два сына - Антон и Неантон</p>
<div id="output"></div>
<script>
(function(){
    var originalBlock = document.getElementById('content'),
        block = originalBlock.cloneNode(true),
      nodes = block.childNodes,
      divEl = document.createElement('p');
 
  
  Array.prototype.forEach.call(nodes, function(node, j){
    if (node.nodeType !== 3) {
        divEl.appendChild(node.cloneNode(true));
    } else {
        var trimmed = node.nodeValue.trim(),
            trimmedValArray = trimmed.split(' ');
          
      console.log(trimmed);
          
      for (var i = 0, len = trimmedValArray.length; i < len; i++) {
        var spanEl = document.createElement('span');
                
        spanEl.innerText = trimmedValArray[i];
        
        divEl.appendChild(spanEl);
      }
    }
  });
  
  document.getElementById('output').appendChild(divEl);
})();
</script>
</body>
</html>

Но что-то подсказывает, что он не самый оптимальный...

@OloloshaNub · 02.04.2016, 03:09 **[ТС]**

Благодарю! Делал, что то похожее. Но тоже думаю, как это будет с большим объемом текста работать? Оборачивая каждое слово в блоки, оптимально ли это..

@Fedor92 · 02.04.2016, 10:02

Сообщение от OloloshaNub

Оборачивая каждое слово в блоки, оптимально ли это..

ИМХО, по сути другого выбора нет...

@OloloshaNub 0 / 0 / 0 Регистрация: 14.05.2015 Сообщений: 9
		1
	Форматирование текста 01.04.2016, 23:06. Показов 502. Ответов 3 Метки css, css3, javascript (Все метки) Доброго времени суток! Прошу помощи, специфика проекта обязует при каких-то обстоятельствах заливать текст в сплошной цвет. Графический пример. Мое шаманство к необходимому эффекту не привело, может кто сталкивался с подобным? Или знает дебри CSS и мог бы подсказать. Можно и на JS,Jquery не принципиально Помогите, пожалуйста. 0

@OloloshaNub 0 / 0 / 0 Регистрация: 14.05.2015 Сообщений: 9
	02.04.2016, 03:09 [ТС]	3
	Благодарю! Делал, что то похожее. Но тоже думаю, как это будет с большим объемом текста работать? Оборачивая каждое слово в блоки, оптимально ли это.. 0

@Fedor92 2964 / 2619 / 1068 Регистрация: 15.12.2012 Сообщений: 10,064 Записей в блоге: 11
	02.04.2016, 10:02	4
	Сообщение от OloloshaNub Оборачивая каждое слово в блоки, оптимально ли это.. ИМХО, по сути другого выбора нет... 0