Блог

Главная - Вопросы по программированию - Новая строка не отображается из тега шаблона в HTML

Новая строка не отображается из тега шаблона в HTML

#html #django #django-templates #newline #templatetags

#HTML #django #django-шаблоны #новая строка #templatetags

Вопрос:

У меня есть набор информации, которая будет отображаться на моей веб-странице с использованием тегов шаблона django.

  {% for product in sales %}

      <div>
        <span>Customer:{{product.to_user}}</span><br>
        <span>{{product.time}}</span><br>
        <p class="message">{{product.message}}</p>
      </div>

      {% endfor %}

{{product.message}} Тег шаблона содержит информацию, разделенную новой строкой (‘n’). Но новые строки не отображаются в HTML, информация отображается в одной строке без указания ‘ n’.
Я попытался захватить информацию из <p> тега и заменить n на <br> , и снова установить текст в том же <p> теге. Но, похоже, это не работает.
Это был мой подход, как указано выше.

 $(document).ready(function(){

      let renderedText = $(".message").text()

      //alert(renderedText)
      final_txt = renderedText.replace(/n/g,"<br>")

      $(".message").val(final_txt)
       
    })

Какие изменения или дополнения я должен внести, чтобы заставить это работать?
Заранее спасибо.

Комментарии:

1.Обычно новая строка заменяется Django на <br> , если вы не установили autoescape off (но по умолчанию она включена):docs.djangoproject.com/en/dev/ref/templates/builtins /….

2. Я проверил, присутствуют ли новые строки (‘ n’) в текстовом теле или нет, выполнив alert(renderedText) , и в предупреждающем сообщении действительно были показаны новые строки в ожидаемых местах. Итак, что вызывает проблему в HTML?

3. вы уверены, что это новые строки, а не '\n' (таким образом, символ обратной косой черты, за которым следует n ). Обратите внимание, что есть разница между '\n' и 'n' .

Ответ №1:

Используйте фильтр шаблонов linebreaksbr вот так :

 <p class="message">{{ product.message|linebreaksbr }}</p>

Комментарии:

1. Спасибо. Теперь работает отлично. Мой плохой, я никогда не сталкивался с linebreaksbr фильтром.

2. Нет проблем! Это полезно. Вас может заинтересовать простой, linebreaks который создает <p> тег для абзаца, когда есть две новые строки.

Ответ №2:

Чтобы получить информацию о строке, вы можете использовать предварительный тег для отслеживания пустых мест и новой строки.

 let message = `Lorem ipsum text Lorem ipsum text Lorem ipsum text.
Lorem ipsum textLorem ipsum text

Lorem ipsum textLorem ipsum textLorem ipsum textLorem ipsum textLorem ipsum textLorem ipsum textLorem ipsum textLorem ipsum textLorem ipsum text`;  
 <div><pre>{message}</pre></div>