Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Aprende Whitespaces | FrontEnd Design
Practice
Projects
Quizzes & Challenges
Quizzes
Challenges
/
Flask Intensive Course: Web Development with Python

bookWhitespaces

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.

¿Todo estuvo claro?

¿Cómo podemos mejorarlo?

¡Gracias por tus comentarios!

Sección 4. Capítulo 6

Pregunte a AI

expand

Pregunte a AI

ChatGPT

Pregunte lo que quiera o pruebe una de las preguntas sugeridas para comenzar nuestra charla

Suggested prompts:

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?

bookWhitespaces

Desliza para mostrar el menú

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.

¿Todo estuvo claro?

¿Cómo podemos mejorarlo?

¡Gracias por tus comentarios!

Sección 4. Capítulo 6
some-alt