1

マップ プロジェクトに取り組んでいますが、テキストにスペースを追加するまで、何らかの理由でツールチップのテキスト幅が必要なだけ拡大し続けます。スペースを追加すると、次の行に分割されます。何が起こっているのですか?どうすれば修正できますか? 幅を指定せずにテキストを 1 行に表示して、自動的に幅を設定できるようにしたいのですが、どうすれば修正できますか?

以下の例では、段落タグ内のテキスト「Baseball Fields」を見てください。「BaseballFields」と表示されている場合は、1 行のままになります。しかし、スペースを追加するとすぐに改行されます。

<div style="width: 750px; height: 1221px; border: 0; padding: 0; margin-top: 10px; display: block; position:relative; background: url('http://www.thefirstacademy.org/filerequest/9701.jpg') no-repeat left top;">
    <style type="text/css">
        .triangle {
            position:absolute;
            bottom:-5px;
            left:40%;
            height:0;
            width:0;
            border-left:5px solid transparent;
            border-right:5px solid transparent;
            border-top:5px solid white;
        }
        .tooltip {
            color:#ef4c4c;
            background:#ffffff;
            padding:17 10;
            display:block;
            position:absolute;
            border-radius:5px;
            font:.8em 'MuseoSans-500','Museo Sans';
            top:-40px;
            box-shadow:0px 3px 3px #000;
            border:1px solid #000;
        }
    </style>

    <div class="marker" style="position:absolute;cursor:pointer;left:450px;top:75px;" id="baseball">
        <img src="http://www.thefirstacademy.org/filerequest/9702.png" alt="Location Marker" />
        <div class="tooltip" >
            <div class="triangle"></div>
            <p style="padding:0;margin:0;line-height:0;display:block;">Baseball Fields</p>
        </div>
    </div>
</div>
4

1 に答える 1

1

注意点: さらに、ブラウザの互換性のためwhite-space: nowrap;に含めると役立つ場合がありますdisplay: inline-block;

于 2013-02-09T04:46:33.053 に答える