2

In HTML5, how do you skip 5 spaces in a <div>? For example, how do you do this:

"Drumroll... [5 spaces] Something!"

<div>Drumroll... [5 spaces] Something!</div> just outputs "Drumroll... Something!"

There does not seem to be any tags such as <indent> that I have found to indent in the middle of a sentence.

&nbsp&nbsp&nbsp&nbsp&nbsp works, but is there a more efficient way? Such as...

<skip 10px></skip>

Specifically, I am looking for the solution to insert exactly 1,000 spaces easily, for example.

Evorlor
  • 7,263
  • 17
  • 70
  • 141
  • 2
    Can you use 5   characters? – Sparky Jan 26 '14 at 17:58
  • Yes I can, sorry I should have been more clear. Looking for something more efficient than typing that over and over. – Evorlor Jan 26 '14 at 17:59
  • 1
    Not sure there is, but hopefully someone chimes in. Traditionally, extra spaces in HTML are ignored in text – Sparky Jan 26 '14 at 18:01
  • The alternatives I see are either using CSS (either with `margin`/`padding` like MrVimes' answer, or with `:before`/`:after` and `content` and only typing the numerous ` `s out once in the value of `content`), using JavaScript to insert the characters (CSS would be vastly preferable to JS), or doing something server-side if that's an option. – ajp15243 Jan 26 '14 at 18:36

3 Answers3

2

This is not perfectly five spaces, and I'm not sure if there's a way to do it without using five consecutive &nbsp;s, but this will allow you to add a specifiable amount of space inline.

<p>Drumroll...<span style="margin-left:50px;"></span>something</p>

http://jsfiddle.net/5drHj/1/

Another option might be to use the <pre> tag...

<pre>Drumroll...     something</pre>

http://jsfiddle.net/5drHj/2/

If you do decide to use consecutive &nbsp; you could use a javascript loop (or php loop for server side construction) to add the 1000 &nbsp;s

Edit: At the risk of losing my tick, I'd like to point out that the answer given by @vals is a third option, and perhaps the most elegant of the three.

MrVimes
  • 3,212
  • 10
  • 39
  • 57
1

No, there is no such element in HTML. Long ago, there was the nonstandard <spacer> tag, but it was abandoned. You are supposed to use CSS for things like this. Wrap some preceding text in a <span> element and set padding-left: 1.25em on it. Tune the value as needed. The width of a space depends on font but is on the average around 0.25em.

Jukka K. Korpela
  • 195,524
  • 37
  • 270
  • 390
1

The question that you pose in the first half of the question (How to insert spaces easily), is achieved with the property:

white-space: pre;

It means that your text is pre-formatted, and the white spaces should stay as they are. Then just insert those spaces.

fiddle

If you want to insert 1000 spaces, then we are talking probably about alignment, and there is a huge amount of posibilities. (padding specified in em being the most obvious), but you should then give more details of your situation.

vals
  • 61,425
  • 11
  • 89
  • 138