ブートストラップツールチップには、行の折り返しと左揃えの実装方法が表示されます。-jsチュートリアル-php.cn

ブートストラップツールチップには、行の折り返しと左揃えの実装方法が表示されます。

小云云

リリース： 2018-01-25 11:26:00

オリジナル

3204 人が閲覧しました

Bootstrap のツールチップ機能を使用すると、改行が失われ、テキストが左揃えにならないという小さな問題が発生しました。この記事では、Bootstrap ツールチップでの改行と左揃えの表示に関する解決策を中心に紹介します。興味のある方はぜひ参考にしてください。

今日、Bootstrap のツールチップ機能を使用しているときに 2 つの小さな問題に遭遇しました。それは、改行が欠落していることと、テキストが左揃えではないことです。その後、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 バックグラウンドから渡されるデータであることに注意してください。

これは Bootstrap Tooltip の最も基本的なコードであり、前述した 2 つの問題を引き起こします。

改行の問題

改行に遭遇したとき、私たちが最初に考えることは、「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='left'>...

中。

<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;
}

ログイン後にコピー

ブートストラップ ツールチップには、行の折り返しと左揃えの実装方法が表示されます。

ブートストラップツールチップには、行の折り返しと左揃えの実装方法が表示されます。