问题
I was trying to add extra spaces ( ) inside a div tag in Elements section in chrome developer tools.
<div>hello world</div>
The above renders as literal.
Expected:
hello world
Actual:
hello world
回答1:
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:
回答2:
For anyone who stumbles upon this question and is actually looking for a way to add non-breaking space characters ( ) 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 will show as text in the browser, editing as HTML will correctly show the non-breaking space character as expected.
来源：https://stackoverflow.com/questions/46029894/cannot-add-extra-spaces-nbsp-in-chrome-developer-tools-while-editing