7

I was trying to add extra spaces ( ) inside a div tag in Elements section in chrome developer tools.

<div>hello&nbsp;&nbsp;world</div>

The above renders as literal.

Expected:

hello  world

Actual:

hello&nbsp;&nbsp;world
Binary Baba
  • 1,953
  • 2
  • 16
  • 23

2 Answers2

14

For anyone who stumbles upon this question and is actually looking for a way to add non-breaking space characters (&nbsp;) into the Developer Tools Elements panel you can do so by right-clicking the element that contains the value you want to add your characters to (or any of its parent elements) and selecting "Edit as HTML".

While double-clicking the value and adding &nbsp; will show &nbsp; as text in the browser, editing as HTML will correctly show the non-breaking space character as expected.

randall
  • 156
  • 1
  • 3
2

When you are using Chrome's Developer Tools, you don't need to worry about HTML entities.

Simply writing the code as you would in an IDE works as expected -- entering
<div>hello world</div> results in a <div> being created with the contents hello world.

Using multiple spaces will also work in this manner:
<div>hello world</div> results in a <div> being created with the contents hello world.

Here is this very answer manipulated in this way:

Before

After

Obsidian Age
  • 41,205
  • 10
  • 48
  • 71
  • I actually need more than one extra space, Sorry I will update the question – Binary Baba Sep 04 '17 at 03:30
  • Writing out the spaces as actual spaces will work even when more than one space is entered. – Obsidian Age Sep 04 '17 at 03:31
  • It certainly should -- I just did it in my Chrome Developer Tools right now with success. Are you actually using the Chrome Developer Tools when you encounter this issue? What version of Chrome are you using? – Obsidian Age Sep 04 '17 at 03:36
  • I've updated my answer to add an image showcasing manipulating this very answer in the above way. – Obsidian Age Sep 04 '17 at 03:43
  • actually the problem is when I edit it inside some tag, it doesn't encode but when I create a new element and then add spaces it works fine. thanks for the answer though, it led me to what I want. – Binary Baba Sep 04 '17 at 07:19