html - 当位置设置为绝对时垂直显示韩文文本 (HTML CSS)

Question

这是一个奇怪的问题。我正在构建的网站上有登录屏幕，上面有一系列标志，可让您设置语言，当您将鼠标悬停在标志上时，它会在仅 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; 位，文本将恢复正常显示(尽管弄乱了我的工具提示!)，如下所示:

任何人都可以向我解释为什么会这样做以及是否有办法阻止它？

Answer 1

我不是东亚语言专家，但据我所知，它们可以在字符之间换行。

代码中的某些内容让工具提示“收缩包装”尽可能小。最好的办法是找到导致它的属性(据我所知，它不包含在您发布的代码中)，或者如果您找不到它，请为您的工具提示指定特定的宽度。

或者使用CSS来停止换行，例如white-space 。我认为还有其他 CSS 属性专门影响东亚语言的换行，但我现在不记得它们了。编辑:找到它:参见word-break