Html 换行：在li上断开单词（列表项）？

我正在尝试创建一个菜单，看起来像链接的图像。(http://i.stack.imgur.com/BCiqJ.jpg). 我以为这会很简单，但我遇到了问题，试图打破与CSS只字。这是针对cms的，因此标记必须：

<ul>
  <li></li>
  <li></li> etc...
</ul>

等等。。。

在图像链接被破坏的情况下，我试图创建一个菜单，在单词之间没有空格，中间有单词断裂，以适应<代码> UL> < /代码>

的宽度。 例如：
HOMEVID
EOSMUSI
CCALEND
AR事件
SPHOTO
S关于C
contact

---

我在这里用手工输入的断线标签伪造了它。。。有没有一种方法可以通过CSS实现这一点？

尝试在

元素上设置

显示：内联
。
我知道您说过希望使用非有序列表，但我想我已经为您提供了一种解决方案，使用div和span代替：

<style type="text/css">
    #navigation span:nth-child(even)
    {
        font-weight: bold;
    }
</style>
<div id="navigation" style="width: 76px; word-wrap: break-word">
    <span>HOME</span><span>VIDEOS</span>
    <span>MUSIC</span><span>CALENDAR</span><span>EVENTS</span>
    <span>PHOTOS</span><span>ABOUT</span><span>CONTACT</span>
</div>


#导航范围：第n个子项（偶数）
{
字体大小：粗体；
}
家庭录像
音乐盛事
关于接触的照片

我只在Chrome上测试过，所以你的里程数会有所不同。我认为其中没有特定于浏览器的内容，所以这应该是一个可行的跨浏览器解决方案。
耶，它很管用！！现在我想起来了。。。使用ul和li进行导航的优势是什么？你知道为什么UL/LI导航模式变得如此标准吗？也许你不能完整地设置跨距样式并列出项目？？有什么想法吗？我也不知道为什么要开始练习。我的意思是没有什么比div和span更具风格了。可能在互联网还很年轻的时候，有一个人想出了一个“酷”的导航，是Web2.0ish，每个人都只是从他们那里抄袭。哈哈。。。可能我认为，如果我只是为我的cms导航创建一个自定义模板，应该可以。谢谢你的提示！相互重建。。。。。。。。。只有当我使用li而不是spans和/或nav而不是ul或div时，这才失败！！这真的很奇怪。我真的不知道为什么会发生这种情况，但任何组合都是有效的，即使是ul和span也可以，但一旦你把导航或列表项放出去，它就会消失。奇怪的