Geek Answers Handbook

Insert a space after each character in CSS

Suppose we have this html:

<h2>TITLE</h2>

Is it possible, thanks to the power of only CSS, to do this or to behave like this:

<h2>T I T L E</h2>

The reason is that I want to justify the letters for a given width in the header, and I don't want to resort to the serveride regular expression witchcraft before evaluating CSS parameters correctly.

I have already managed to justify single letters through CSS using the following rules:

h2 {
  text-align: justify;
  width: 200px; // for example
}

h2:after {
  content: "";
  display: inline-block;
  width: 100%;
}

I looked text-replace, but there is no support in any major browser. Other than that, I have not yet found a single encouraging candidate.

CSS3 will be ok if support is supported, JS doesn't help.

UPDATE

letter-spacing , . . , , , - :)

jsfiddle

+4
3

- CSS css .

h2 {
      letter-spacing:10px;
   }
+5

CSS letter-spacing:

h2 {
  letter-spacing: 2em;
}

jsfiddle demo

+5

More articles:


All Articles