Take the 2-minute tour ×

I have an array ["hello", "there", "buddy"] and I want to join these strings together. The issue is that I want to join them together with multiple white-spaces, specifically three of them. My code runs as

sentence = sentence.join("   ")

However, instead of returning

hello   there   buddy

it returns as

hello there buddy

How do I fix this?

share|improve this question

closed as too localized by sawa, Geoff Lanotte, shiplu.mokadd.im, the Tin Man, Fraser Dec 22 '12 at 3:26


Is it HTML where the spaces are "missing"? –  iltempo Dec 21 '12 at 23:01
The text is within a li tag. The page source shows <li>Hello there buddy</li> –  jason328 Dec 21 '12 at 23:26
Seems like something's cleaning up the data before it's inserted, if the value is exactly that in the database, or after retrieval. What if you join with join("SPACESPACESPACE") instead? –  tadman Dec 21 '12 at 23:32
Nothing is cleaning up the data. Browsers collapse multiple whitespace between words into a single space, which is what is happening inside <li>word word word</li>. To display multiple spaces, a non-whitespace character has to be used, such as &nbsp;. –  the Tin Man Dec 22 '12 at 2:29

2 Answers 2

up vote 2 down vote accepted

The text is within a li tag. The page source shows

  • Hello there buddy
  • The problem is that browsers collapse whitespace runs between words. You can see this, and counter it, a couple ways.

    <p>1   2   3</p>

    displays with multiple spaces here on Stack Overflow, and consequently your browser, because I told it to use code formatting. I can do it also with:

    1   2   3

    which tells the browser to display using <pre> formatting, which, again, is a fixed-width font which respects the whitespaces.

    If you don't use a fixed-width format designed to preserve whitespace, you have to get tricky.

    In HTML you can use a non-breaking space:

    1   2   3

    which, in HTML looks like:


    If I'd used regular whitespace it would look like:

    1 2 3

    There are CSS games that can be played too, but using &nbsp; is probably the most common.

    To try this at home, save the following to a file called "test.html" and open it with your browser:

    <html><body><p>collapsed    whitespaces   here</p>
    share|improve this answer
    Your answer is correct. Although steenslag gave me the correct answer, you were able to explain the exact cause of my problem. Hence, why I gave you credit. Thanks! –  jason328 Dec 23 '12 at 1:56

    It just works as expected:

    p ["hello", "there", "buddy"].join("   ")
    # => "hello   there   buddy"
    share|improve this answer
    I'm starting to think that it may be a database issue. I'm using DataMapper and Sinatra. Let me do a little more investigation and research this, then I'll update my question. –  jason328 Dec 21 '12 at 23:01
    I'll accept the answer since the issue seems unrelated to my question. –  jason328 Dec 21 '12 at 23:40
    It's not the database, it's how browsers work. If you need to display multiple spaces, you'll have to use &nbsp; instead of ' ' to join your words. –  the Tin Man Dec 22 '12 at 2:30
