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 来停止包装，例如white-space。我认为还有其他 CSS 属性会特别影响东亚语言的换行，但我现在不记得它们了。编辑：找到它：见分词

于 2012-07-03T11:44:12.403 回答
1

尝试使用word-break: keep-all [ keep-all：中文/日文/韩文 (CJK) 文本不应使用分词符。非 CJK 文本行为与值 "normal"] 相同。在 Chrome/firefox/Safari 上进行了测试。似乎工作正常。

于 2021-03-14T17:13:50.703 回答