How can I display some text with spaces in HTML, with double space characters

Question

I need to display the following as HTML text (verbatim):

T H I S  I S  A  T E X T

As you can see:

all characters have a space in between
the space characters have been doubled
I want to have that inside an <a> tag

What I have tried is:

<a href="#">T H I S  I S  A  T E X T</a>

But html compresses several space characters into one.

How can I force the double spaces?

I learned something new today http://stackoverflow.com/questions/433493/why-do-multiple-spaces-in-an-html-file-show-up-as-single-spaces-in-the-browser — John b, Jun 21 '13 at 12:57
Is the goal to actually have a space character between every printing character or just spread out the letters? — Rob Allen, Jun 21 '13 at 12:58
using &nbsp is not good as i guess .You can use letter spacing — underscore, Jun 21 '13 at 13:02

score 4 · Answer 1 · answered Jun 21 '13 at 12:58

4

You can do this via CSS

letter-spacing: 5px;

answered Jun 21 '13 at 12:58

stackErr

4,130
3
24
48

score 3 · Answer 2 · answered Aug 21 '15 at 15:20

3

A better solution than &nbsp which is non-breaking, is &emsp which is double space (useful at the end of a sentence), or &ensp which is single space.

answered Aug 21 '15 at 15:20

Rodney Barnett

31
1

score 2 · Accepted Answer · answered Jun 21 '13 at 13:00

letter-spacing

Definition and Usage

The letter-spacing property increases or decreases the space between characters in a text.

 <!DOCTYPE html>
    <html>
    <head>
    <style>
    a {letter-spacing:5px;}

    </style>
    </head>

    <body>
    <a href="#">THIS IS A TEXT</a>
    </body>
    </html>

WORKING DEMO

score 1 · Answer 4 · answered Feb 23 '18 at 13:06

You can use HTML pre tag and style it e.g.

<a href="#"><pre>T H I S  I S  A  T E X T</pre></a>

pre tag preserve any number of spaces in HTML. You can also style it to look like regular text e.g.

<style>
    pre {
         background: transparent;
         display: inline;
         border: none;
         padding: 0;
    }
</style>

score 0 · Answer 5 · answered Jun 21 '13 at 12:55

0

You want a Non-breaking Space caracter $nbsp;... It's one of HTML Entities avaible out there ;-)

More Info: http://www.w3schools.com/html/html_entities.asp

answered Jun 21 '13 at 12:55

gmo

8,860
3
40
51

score 0 · Answer 6 · answered Jun 21 '13 at 12:55

0

Use   between your letters like this: T H I S  I S  A  A  T E X T

answered Jun 21 '13 at 12:55

score 0 · Answer 7 · answered Jan 11 '23 at 06:16

0

Use the style white-space: pre:

<!DOCTYPE html>
<html>
  <span style="white-space: pre">    Extra   Space   </span>
  <br>
  <span>    No    Extra   Space   </span>
</html>

answered Jan 11 '23 at 06:16

sainu

2,686
3
22
41

How can I display some text with spaces in HTML, with double space characters

7 Answers7

Linked

Related