Ответ 1
Вам нужно использовать <br /> для новой строки в html или использовать тег <pre>
Bootstrap popover скрывает разрывы строк
Я использую html-код следующим образом, чтобы показать загрузчик
<a data-original-title="" data-content="Hi,
Welcome !
Sincerely,
programmer
"
data-placement="bottom">
content
</a>
И я инициализировал popover следующим образом
$(this).popover({
html:true
});
Все работает нормально, но проблема заключается в содержимом, доступном в содержимом данных, не отображаемом с пробелами.... Он удаляет все новые строки и показывает их в одной строке.... Как я могу это преодолеть...
Ответы
Ответ 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 внутри текста справки будут работать нормально,