Bootstrap의 도구 설명 기능을 사용할 때 줄 바꿈이 사라지고 텍스트가 왼쪽 정렬되지 않는 몇 가지 사소한 문제가 발생했습니다. 이 글은 주로 줄 바꿈과 왼쪽 정렬을 표시하는 부트스트랩 툴팁 솔루션을 소개합니다. 관심 있는 친구들이 이 글을 살펴보는 것이 도움이 되기를 바랍니다.
오늘 Bootstrap의 도구 설명 기능을 사용할 때 두 가지 사소한 문제가 발생했습니다. 줄 바꿈이 누락되고 텍스트가 왼쪽 정렬되지 않습니다. 그러다가 Baidu와 Bing을 통해 해결책을 찾았습니다.
먼저 Bootstrap에서 도구 설명을 표시하는 코드를 살펴보세요.
<link href="bootstrap/css/bootstrap.min.css" rel="external nofollow" rel="stylesheet" type="text/css"/> <script src="res/jquery.min.js" type="text/javascript"></script> <script src="bootstrap/js/bootstrap.min.js" type="text/javascript"></script> <script> $(function () { $('[data-toggle="tooltip"]').tooltip(); }); </script> <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" title="${desc}">${title}</button>
여기서 ${desc} 및 ${title}는 SpringMVC 배경에서 전달된 데이터입니다.
이것은 제가 언급한 두 가지 문제를 일으키는 부트스트랩 툴팁의 가장 기본적인 코드입니다.
줄바꿈 문제
줄바꿈이 발생하면 가장 먼저 생각나는 것은 "n"을 "
"로 바꾸는 것입니다. 저도 똑같이 했는데 안타깝게도 툴팁에서는 작동하지 않습니다. 도구 설명에는 '
'가 텍스트로 직접 표시됩니다.
즉, HTML은 툴팁에서 작동하지 않습니다. 다행히도 도구 설명에서 HTML을 사용하고 "
"를 작동시킬 수 있는 data-html 속성을 찾았습니다. data-html="true"를 추가하면 줄 바꿈이 작동합니다. 다음 코드를 참조하세요.
<button type="button" class="btn btn-default" data-html="true" data-toggle="tooltip" data-placement="left" title="${fn:replace(desc, newline, "<br/>")}">${title}</button>
왼쪽 정렬
HTML 기반으로 작동한 후에는 왼쪽 정렬을 수행하는 것이 훨씬 간단합니다. ;p align='왼쪽'>...
중.<button type="button" class="btn btn-default" data-html="true" data-toggle="tooltip" data-placement="left" title="<p align='left'>${fn:replace(desc, newline, "<br/>")}</p>">${title}</button>
이유가 무엇이든
가 작동하지 않으면 여전히 많은 옵션이 있습니다:
<style> .tooltip > p { text-align:left; } </style> .tooltip-inner { text-align:left; }
관련 권장 사항:
Vue 구성 요소의 도구 설명 인스턴스에 대한 자세한 설명
기본 JavaScript 구현에 대한 자세한 설명 툴팁 부동 프롬프트 상자 특수 효과를 위한 그래픽 코드
jToolTip 요소 위치 지정 및 표시 기능 구현에 대한 쿼리 예제
위 내용은 부트스트랩 도구 설명은 줄 바꿈 및 왼쪽 정렬 구현 방법을 표시합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!