Blank spaces inserted in Django template empty div - html

Question

I have a Django template which looks like this:
<div class = 'description' contenteditable = 'true' placeholder='{{my_placeholder}}'>
</div>
The problem is that Django inserts blank spaces in div so that the code below yields
A
B
instead of AB:
alert('A' + $('.new').find('.description').html() + 'B');
If I rewrite the HTML code as follows (by bring </div> on the same line):
div class = 'description' contenteditable = 'true' placeholder='{{my_placeholder}}'></div>
...the issue goes away. However, I do like the HTML structure where the closing is on a new line. How can I keep this structure so that the element is really blank and I can see the placeholder value ?

Answer 1

You can use {% spaceless %} to remove whitespace between HTML tags:
{% spaceless %}
<div class = 'description' contenteditable = 'true' placeholder='{{my_placeholder}}'>
</div>
{% endspaceless %}
More about {% spaceless %} here.

Answer 2

Solution with spaceless template tag is fine if you've got only few spots with urgent need to eliminate whitespaces, but you should not have too much of them or wrap entire content in spaceless.
My point is that it's JavaScript work to be aware that content might contain whitespaces, so just use something like trim() function for inner HTML:
alert('A' + $('.new').find('.description').html().trim() + 'B');
Other than that, indented code with newlines like you've got is perfectly fine for readability purposes, however, I suggest minifying it on production with tools like django-htmlmin that will squash your templates when it reaches the user.