Как отобразить новые строки в элементе div?

#javascript #html #css

#javascript #HTML #css

Вопрос:

У меня есть элемент div, в который я добавляю текст с помощью JavaScript. Я хочу, чтобы новый текст добавлялся в новую строку. Я пробовал два метода, оба, похоже, работают при просмотре текста в окне разработчика, но новые строки игнорируются на самой странице. Вот два метода, которые я пробовал:

 targetEl.textContent  = "n"   sourceIdEl.textContent;

targetEl.textContent  = document.writeln(sourceIdEl.textContent);

Оба, похоже, работают в окне разработки:

Но строки игнорируются на самой странице:

Вот CSS, применяемый к элементу div:

 .board-list {
    background-color: rgb(235, 236, 240);
    border-radius: 6px;
    display: grid;
    grid-auto-rows: max-content;
    grid-gap: 10px; /* Chrome use a fixed height */
    min-height: 100px;
    height: max-content;
    padding:6px;
    padding-bottom: 40px;
}

Что я могу сделать, чтобы исправить это?

Ответ №1:

Разрывы строк в HTML такие же, как обычные пробелы.

Попробуйте

 targetEl.innerHTML  = "<br>"   sourceIdEl.textContent

 "use strict";

;(function(d) {
  var items = [
    '1640DF9447 - Petersen Group - Temp Fence',
    '1710DF0204 - MNDOT Detroit Lakes',
    '1710DF5250 - Lenthe, Dirk - Fabricate And Install Fence',
    "1810DF1601 - ND Petroleum Equipment-6' Chainlink Fence Install Hallok MN",
    '1820DF1012 - Fort Abraham Lincoln Foundation Heritage River Temp Fence',
  ]
  var addListItem = function() {
    var bl = d.getElementById('board-list')
    bl.innerHTML  = items.shift()   "<br>"
  }
  d.addEventListener('click', function(e) {
    if (e.target.closest('#add-board-list-item')) {
      addListItem()
    }
  })
}(document));

 .board-list {
    background-color: rgb(235, 236, 240);
    border-radius: 6px;
    display: grid;
    grid-auto-rows: max-content;
    grid-gap: 10px; /* Chrome use a fixed height */
    min-height: 100px;
    height: max-content;
    padding:6px;
    padding-bottom: 40px;
}

 <button id="add-board-list-item">Add Item</button>
<div class="board-list" id="board-list"></div>

или использовать

   white-space: pre-line;

 "use strict";

;(function(d) {
  var items = [
    '1640DF9447 - Petersen Group - Temp Fence',
    '1710DF0204 - MNDOT Detroit Lakes',
    '1710DF5250 - Lenthe, Dirk - Fabricate And Install Fence',
    "1810DF1601 - ND Petroleum Equipment-6' Chainlink Fence Install Hallok MN",
    '1820DF1012 - Fort Abraham Lincoln Foundation Heritage River Temp Fence',
  ]
  var addListItem = function() {
    var bl = d.getElementById('board-list')
    bl.textContent  = items.shift()   "n"
  }
  d.addEventListener('click', function(e) {
    if (e.target.closest('#add-board-list-item')) {
      addListItem()
    }
  })
}(document));

 .board-list {
    background-color: rgb(235, 236, 240);
    border-radius: 6px;
    display: grid;
    grid-auto-rows: max-content;
    grid-gap: 10px; /* Chrome use a fixed height */
    min-height: 100px;
    height: max-content;
    padding:6px;
    padding-bottom: 40px;
    white-space: pre-line
}

 <button id="add-board-list-item">Add Item</button>
<div class="board-list" id="board-list"></div>

1. Спасибо, пока это работает. Быстрый вопрос, я сохраняю это текстовое содержимое в таблице SQL Server как varchar. Будут <br> ли теги сохранены и загружены правильно, если я установлю для поля значение targetEl.innerHTML?

2. Я ничего не знаю о том, как вы их храните, поэтому я не могу сделать никаких предложений по этому поводу

Ответ №2:

Заменить n на <br>

 const lineBreakText = `
  some 
  text
  with
  line
  breaks
`;

const element = document.querySelector('#lineBreakText');

element.innerHTML = lineBreakText.replace(/n/g, '<br>');

 <div id="lineBreakText"></div>