Как разделить слово на буквы, если они находятся в одном div?

Question

Я хочу сделать background стиль css для каждой буквы в одном div

<div class="hello">1999</div>

таким образом, как будто у счетчика за каждой цифрой стоит фон

Как я могу это сделать? без разделения классов div один за другим.

_{Свободный перевод вопроса How do i separate a word per letter when they are in one div? от участника @Jonathan Edward.}

Answer 1

Если вы хотите сделать это после загрузки страницы, вы можете использовать JavaScript

Что-то вроде этого:

const div = document.querySelector(".hello")
div.innerHTML = div.textContent.split("").map(letter => `<span ${letter.trim() === "" ? "" : 'class="block"'}>${letter}</span>`).join("")

.block {
  display: inline-block;
  height: 50px;
  width: 50px;
  background-color: black;
  color: white;
  margin: 2px;
  font-size: 34px;
  text-align: center;
  vertical-align: middle;
  line-height: 50px;
  font-family: arial, sans-serif;
}

<div class="hello">      1999     </div>

Emojis:

.hello { font-size: 50px; letter-spacing: 5px;}

<div class="hello">1️⃣9️⃣9️⃣9️⃣</div>

_{Свободный перевод ответа от участника @mplungjan.}

Answer 2

Вы можете поиграть с фоном и моноширинным шрифтом:

.hello {
  display: table;
  margin:20px auto;
  font-size: 100px;
  letter-spacing: 0.5ch;
  font-family: monospace;
  color: #fff;
  background: 
    repeating-linear-gradient(to right, #000 0 calc(1.5ch - 10px), transparent 0 1.5ch)
    0 0/calc(100% - 11px) 100% no-repeat;
  padding-left: 10px;
}

<div class="hello">1999</div>

<div class="hello">19990</div>

<div class="hello">333</div>

Или с некоторыми переменными CSS:

.hello {
  --c:black; /* color */
  --s:0.5ch; /* space between letter*/
  --b:10px;  /* transparent border*/

  display: table;
  margin:20px auto;
  font-size: 100px;
  letter-spacing: var(--s);
  font-family: monospace;
  color: #fff;
  background: 
    repeating-linear-gradient(to right, var(--c) 0 calc(1ch + var(--s) - var(--b)), transparent 0 calc(1ch + var(--s)))
    0 0/calc(100% - var(--s)/2 - 1px) 100% no-repeat;
  padding-left: calc((var(--s) - var(--b))/2);
  transform:translateX(calc(var(--s)/3)); /* rectify the centring */
}

html {
 background:#f3f3f3;
}

<div class="hello">1999</div>

<div class="hello" style="--c:red;--b:5px;--s:1ch;font-size:80px;">19990</div>

<div class="hello" style="--c:green;--b:20px;--s:2ch">333</div>

_{Свободный перевод ответа от участника @Temani Afif.}

Answer 3

Вариант jQuery:

var data = $(".hello").html().split("");
$(".hello").empty();
data.forEach(function(fig) {
  $(".hello").append("<span class='block'>" + fig + "</span>");
});

.block {
  display: inline-block;
  height: 50px;
  width: 50px;
  background-color: black;
  color: white;
  margin: 2px;
  font-size: 34px;
  text-align: center;
  vertical-align: middle;
  line-height: 50px;
  font-family: arial, sans-serif;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="hello">1999</div>

БЛОГ НА HUSL

Как разделить слово на буквы, если они находятся в одном div?

Ответы (3 шт):