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

Я использую HTML код следующим образом, чтобы показать бутстрапом поповерBootstrap поповер скрывает разрывы строк

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

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

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

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

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

источник

2013-01-22 Aravind

Как уже упоминалось Арун, вы должны будете использовать HTML в атрибут данных. Если вам нужно использовать атрибуты внутри атрибутов, просто используйте одинарные кавычки. – isherwood

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

источник

2013-01-22 13:30:40

+57

Это не работает без 'data-html =" true "' – daVe

Огромное вам спасибо:) – mohammad

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

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

источник

2014-11-21 09:57:59 AncientSyntax

Это великолепно и нужно больше upvotes. Я не знал о опции «pre-wrap». – mcNux

Это также сохраняет несколько смежных пространств в тексте. 'white-space: pre-line' сохраняет только разрывы строк. – qbert220

Для добавления к раствору Arun P Johny в, если вы обнаружите, что ваши <br /> тегов в значении data-content оказывают как простой текст в содержании поповера на странице, добавьте дополнительный атрибут 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 attacks; не используйте его с неаналитированным вводом пользователя.

Docs: https://getbootstrap.com/docs/3.3/javascript/#popovers-options

источник

2015-01-06 14:52:42

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

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

Благодарность за помогите, всем!

источник

2015-07-22 07:41:26

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

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

источник

2016-02-02 22:29:29 cmejet

Да, это правильный ответ! Благодаря! – EstebanGarciaAlonso

Вам просто нужно добавить данных HTML = «истина» в теге, то все ваши HTML-теги внутри текста справки работают отлично,

источник

2016-11-24 10:08:44

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

ответ

Смежные вопросы