Whitespaces
If we want to add something with the different new lines, like multiple lines:
Let say:
Line 1
Line 2
Line 3
And we post it as you can see the whitespace and new lines are not preserved and are not being rendered here.
Let's go to recipes and the loop where the content is printed out.
And inside <p> tag write style="white-space: pre-wrap". And go back and refresh.
{% for recipe in recipes %}
{% if recipe.author %}
<small>Written by {{ recipe.author }} on {{ recipe.date_posted }}</small>
{% else %}
<small>Written by unknown on {{ recipe.date_posted }}</small>
{% endif %}
<h2>{{ recipe.title }}</h2>
<p style="white-space: pre-wrap">{{ recipe.description }}</p>
<a href="/recipes/delete/{{ recipe.id }}" class="btn btn-danger">Delete</a>
<a href="/recipes/edit/{{ recipe.id }}" class="btn btn-primary">Edit</a><br><br>
As you can see, the whitespaces and new lines are all preserved. So, actually, we can have multiple paragraphs per recipe description.
Danke für Ihr Feedback!
Fragen Sie AI
Fragen Sie AI
Fragen Sie alles oder probieren Sie eine der vorgeschlagenen Fragen, um unser Gespräch zu beginnen
Can you explain what the "white-space: pre-wrap" style does?
How can I use this technique in other parts of my website?
Are there any alternatives to "pre-wrap" for handling whitespace in HTML?
Großartig!
Completion Rate verbessert auf 3.7
Whitespaces
Swipe um das Menü anzuzeigen
If we want to add something with the different new lines, like multiple lines:
Let say:
Line 1
Line 2
Line 3
And we post it as you can see the whitespace and new lines are not preserved and are not being rendered here.
Let's go to recipes and the loop where the content is printed out.
And inside <p> tag write style="white-space: pre-wrap". And go back and refresh.
{% for recipe in recipes %}
{% if recipe.author %}
<small>Written by {{ recipe.author }} on {{ recipe.date_posted }}</small>
{% else %}
<small>Written by unknown on {{ recipe.date_posted }}</small>
{% endif %}
<h2>{{ recipe.title }}</h2>
<p style="white-space: pre-wrap">{{ recipe.description }}</p>
<a href="/recipes/delete/{{ recipe.id }}" class="btn btn-danger">Delete</a>
<a href="/recipes/edit/{{ recipe.id }}" class="btn btn-primary">Edit</a><br><br>
As you can see, the whitespaces and new lines are all preserved. So, actually, we can have multiple paragraphs per recipe description.
Danke für Ihr Feedback!