부트스트랩에서 팝오버 data-content 개행 넣기

2024. 5. 10. 11:19
728x90

\n 개행문자를 넣어도 그냥 \n이 그대로 출력되었다 ㅠ

그게아니라 엔터좀 쳐주라구!!!!

<button type="button" class="btn btn-secondary"
                                    id="halalPopover"
                                    data-bs-toggle="popover" data-bs-placement="right"
                                    data-bs-custom-class="custom-popover"
                                    data-bs-title="'할랄'이란?"
                                    data-bs-trigger="focus"
                                    data-bs-content="이슬람 율법상 허용되는 것을 의미하는 아랍어로, 무슬림이 먹거나 사용할 수 있는 것<br /><br />
                        금지되는 식품(Haram)<br />
                        ㆍ 돼지/개와 그 부산물 및 유래 성분<br />
ㆍ 이슬람법에 의해 도축되지 않은 동물<br /> ㆍ비할랄문질에 의해 오염된 것<br /> ㆍ 해충 및 이와 유사한 생물<br /> ㆍ술, 알콜성 음료 등<br /><br />
<strong>국내 식당에서 할랄 인증이란?</strong><br />
: 한국 이슬람교(KMF)의 인증을 받은 식당<br />">
                                '할랄'이란?
                            </button>

 

<br>, <p>, \r/n , HTML 특수문자 등 아무리 넣어도 안됐는데 

 

찾아보니 중요한 속성을 넣어주어야 했다

data-bs-html="true"

 

<button type="button" class="btn btn-secondary"
                                    id="halalPopover"
                                    data-bs-toggle="popover" data-bs-placement="right"
                                    data-bs-custom-class="custom-popover"
                                    data-bs-title="'할랄'이란?"
                                    data-bs-trigger="focus"
                                    data-bs-html="true"
                                    data-bs-content="이슬람 율법상 허용되는 것을 의미하는 아랍어로, 무슬림이 먹거나 사용할 수 있는 것<br /><br />
                        금지되는 식품(Haram)<br />
                        ㆍ 돼지/개와 그 부산물 및 유래 성분<br />
ㆍ 이슬람법에 의해 도축되지 않은 동물<br /> ㆍ비할랄문질에 의해 오염된 것<br /> ㆍ 해충 및 이와 유사한 생물<br /> ㆍ술, 알콜성 음료 등<br /><br />
<strong>국내 식당에서 할랄 인증이란?</strong><br />
: 한국 이슬람교(KMF)의 인증을 받은 식당<br />">
                                '할랄'이란?
                            </button>

 

요렇게 넣어주었더니 엔터 제대로 나온다! 

짱짱

728x90

'Programming > Frontend (HTML, CSS)' 카테고리의 다른 글

Bootstrap  (1) 2023.12.15
CSS Flexbox  (0) 2023.12.15
CSS Box Model  (0) 2023.12.14
CSS  (0) 2023.12.13
HTML  (2) 2023.12.12

BELATED ARTICLES

more