Bootstrap popover скрывает разрывы строк

Я использую html-код следующим образом, чтобы показать загрузчик

<a data-original-title="" data-content="Hi,
           Welcome !

           Sincerely,
             programmer
           "
   data-placement="bottom">
    content
</a>

И я инициализировал popover следующим образом

$(this).popover({
            html:true
        });

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

Ответ 1

Вам нужно использовать <br /> для новой строки в html или использовать тег <pre>

Ответ 2

Чтобы добавить к решению Arun P Johny, если вы обнаружите, что теги <br /> в значении data-content отображаются как обычный текст в содержимом popover на странице, добавьте дополнительный атрибут data-html="true", например

<a data-content="Hi,<br />Welcome !<br /><br />Sincerely,<br />programmer"
        data-html="true"
        data-placement="bottom">
    content
</a>

Помните, что использование data-html="true" действительно создает потенциальную уязвимость атаки XSS; не используйте его с несаминированным пользовательским вводом.

Документы: https://getbootstrap.com/docs/3.3/javascript/#popovers-options

Ответ 3

Вы можете использовать white-space: pre-wrap; для сохранения разрывов строк в форматировании. Нет необходимости вручную вставлять элементы html.

.popover {
    white-space: pre-wrap;    
}

Ответ 4

Мне удалось получить эту работу, добавив \n в мой текст popover, где я хочу, чтобы строки сломались и добавили следующее в мою таблицу стилей:

.popover {
    white-space: pre-line;    
}

Спасибо за помощь, всем!

Ответ 5

Нам удалось использовать стиль white-space: pre-wrap, за исключением того, что мы обнаружили, что добавили лишние пробелы во весь pop-over. Вместо этого мы добавили этот стиль в содержимое popover.

.popover-content {
    white-space: pre-wrap;
}

Ответ 6

Вам просто нужно добавить data-html = "true" в свой тег, тогда все ваши теги html внутри текста справки будут работать нормально,