我正在为我们的网站构建一个工具提示功能，它应该是一个简单的突出显示图标图像，旁边会出现一些文字。我遇到的问题是应该在工具提示泡沫内部的词语为每个词语分成一个新行。当代码独立时它工作正常。
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>