집 >웹 프론트엔드 >JS 튜토리얼 >부트스트랩 도구 설명은 줄 바꿈 및 왼쪽 정렬 구현 방법을 표시합니다.

부트스트랩 도구 설명은 줄 바꿈 및 왼쪽 정렬 구현 방법을 표시합니다.

小云云원래의: 2018-01-25 11:26:003212검색

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=&#39;left&#39;>${fn:replace(desc, newline, "<br/>")}</p>">${title}</button>

이유가 무엇이든

가 작동하지 않으면 여전히 많은 옵션이 있습니다:

<style> 
 .tooltip > p {
  text-align:left;
 }
</style>
.tooltip-inner {
  text-align:left;
}

부트스트랩 도구 설명은 줄 바꿈 및 왼쪽 정렬 구현 방법을 표시합니다.

관련 기사