code

Bootstrap 3의 도구 설명에 줄 바꿈 추가

codestyles 2020. 11. 29. 11:44
반응형

Bootstrap 3의 도구 설명에 줄 바꿈 추가


Bootstrap 3을 사용하고 있으며 내 div에 도구 설명을 추가했습니다. <br> \ n 및 & # 013; 새 줄을 만듭니다. 부트 스트랩이 나를 막는 것이 문제일까요?

<div class="content show-tooltip" data-placement="top" 
     data-original-title="1st line of text <br> 2nd line of text">

data-html="true"마크 업 에 추가 해야합니다 ..

<div class="content show-tooltip" data-html="true" data-placement="top" 
     title="1st line of text <br> 2nd line of text">

작동 데모 : http://www.bootply.com/83099


제목에서 다음 코드를 사용하여 줄을 끊습니다.

HTML

...title="- Item 1 &#013; - Item 2 &#013;"

CSS

.ui-tooltip {
    /* tooltip container box */
    white-space: pre-line;
}

.ui-tooltip-content {
    /* tooltip content */
    white-space: pre-line;
}

참고 URL : https://stackoverflow.com/questions/19001766/add-line-break-to-tooltip-in-bootstrap-3

반응형