2

これは奇妙な問題です。私が構築しているサイトにログイン画面があり、言語を設定できる一連のフラグがあります。フラグの上にカーソルを置くと、言語の名前が CSS のみのツール ヒントに表示されます。

これは、言語が韓国語または中国語の場合を除き、正常に機能します。この場合、テキストは次のように縦に配置されます。

ツールチップ

これらの言語はどちらも縦にも横にも読めると思うので、これが大きな問題かどうかはわかりません。しかし、なぜそれが起こっているのか知りたいのですが、実際には IE9、IE7、Chrome、Firefox で発生します。だからそういう意味なのかもしれないと思います。

でも！位置が絶対に設定されている場合にのみ発生するようです。ここに私のHTMLがあります:

<span class="tooltip">          
    <a href="/Login/Index?Language_Id=2">
        <img alt="한국의" class="Language_Flag" src="/Content/images/flags/kor.png" />  
    </a>                
    <span class="tip_basic">
        한국의
    </span>
</span>

そしてCSS：

span.tooltip
{
position: relative;
}

span.tooltip .tip_basic
{
display: none;
position: absolute;

background-color: rgba(255, 255, 255, 0.7);
border: 3px solid #224E8B;
padding: 10px;
border-radius: 10px;

-webkit-box-shadow: 0px 2px 4px 1px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 0px 2px 4px 1px rgba(0, 0, 0, 0.5);
box-shadow: 0px 2px 4px 1px rgba(0, 0, 0, 0.5);
}

span.tooltip:hover span.tip_basic
{
display: block;    
position: absolute;
left: 1em;
top: 2em;
z-index: 99;
margin-left: 0;
}

ここで私を混乱させるのは、position: absolute;ビットを削除すると、テキストが通常の表示に戻ることです (ただし、ツールチップが台無しになります!) 次のように:

ツールチップ 2

なぜこれを行うのか、それを止める方法があるのか​​ 誰かが私に説明できますか?

4

2 に答える 2

3

私は東アジアの言語の専門家ではありませんが、私が知る限り、文字を折り返すことは許可されています。

コードの何かが、ツールのヒントを可能な限り小さく「シュリンクラップ」させています。最善の方法は、これが原因となっているプロパティを見つけることです（私が言う限り、投稿したコードには含まれていません）。見つからない場合は、ツールのヒントに特定の幅を指定します。

または、CSSを使用して、空白などの折り返しを停止します。特に東アジア言語のラッピングに影響を与えるCSSプロパティは他にもあると思いますが、今は思い出せません。編集：それを見つけた：ワードブレイクを参照してください

于 2012-07-03T11:44:12.403 に答える