Space not taking when displaying value in div

Question

I am entering some text in a input box. When entering a text I am giving some spaces means more then 1 space just say 4 or 5. But when I get the value from the input box and append to a div. It replaces all extra spaces with once single space.

Example, I enter text like this. "Hi can you please look on it ?"

then if get the value using $("#inpuboxid").val(); then append that value to div.

it become like this: "Hi can you please look on it ?"

How to achieve this, as browser automatically replaces extra spaces with once space

http://stackoverflow.com/questions/4503001/multiple-spaces-between-words-in-html-without-nbsp — Matt Way, Feb 01 '14 at 05:14
@SureshBora Before your edit, stackoverflow also removed the spaces... — Matt Way, Feb 01 '14 at 05:25

score 6 · Accepted Answer · edited Feb 01 '14 at 05:25

6

HTML squishes adjacent spaces together by default. Add a style of "white-space: pre;" to your div. This should keep all the white space in its contents.

<div style="white-space: pre;">Hi    can  you please look    on  it     ?</div>

See this Fiddle

edited Feb 01 '14 at 05:25

Zword

6,297
3
24
51

answered Feb 01 '14 at 05:14

Anthony Chu

36,614
10
80
71

1

Thanks, Anthony Chu. Worked like charm. – Bora Feb 01 '14 at 05:23

Alexander O'Mara · Answer 2 · 2014-02-01T05:18:08.917

1

After you set the text of the element, you can use the html method to replace spaces with  . Here is an example.

$("#somelement").text($("#inpuboxid").val()).html(function(index,html){return html.replace(/ /g, '&nbsp;');})

edited Feb 01 '14 at 05:18

answered Feb 01 '14 at 05:15

Alexander O'Mara

56,044
17
157
163

Space not taking when displaying value in div

2 Answers2

See this Fiddle