html - 多个单词在绝对定位元素上中断

Question

我正在为我们的网站构建工具提示功能，它应该是图标图像上的简单突出显示，旁边会显示一些文本。我遇到的问题是应该在工具提示气泡内的单词为每个单词换行。当代码独立时，它工作正常。

ul { list-style-type: none; margin: 0; }
li { width: 50px; height: 50px; background: #000; color: #fff; position: relative; }
li:hover { background: #eee; color: #000; }
li:hover #z { display: block; }
#z { position: absolute; left: 50px; height: 50px; background: orange; color: #fff; display: none; }

<ul>
    <li>
        <div id="z">
            some word that shouldn't break
        </div>
    </li>
</ul>

http://jsfiddle.net/emqLnmo8/1/

Answer 1

使用 white-space: nowrap; 来阻止单词换行。

以你的例子为例: fiddle .