自動換行：關於li（列出項目）的斷詞？

Question

我正在嘗試創建一個看起來像鏈接的圖像的菜單。 （http://i.stack.imgur.com/BCiqJ.jpg）。 我以為這真的很簡單，但是在嘗試僅使用CSS打破常規時遇到了問題。 這是一個cms，因此標記的重要性是：

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

如果圖像鏈接斷開，我將嘗試創建一個菜單，使單詞之間沒有空格，並且單詞在中間斷開以適應<ul>的寬度

如：
家庭 錄像
EOS MUSI
C 日歷
AR EVENT
相片中
是 關於 ç
在線

我在這里通過使用手動輸入的<br />換行符來偽造它。有沒有辦法使CSS做到這一點？

Answer 1

好吧，我知道您說過您想使用無序列表，但是我想我為您提供了一個使用div和spans的解決方案：

<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>

我僅在Chrome中測試過此功能，因此您的行駛里程會有所不同。 我不認為瀏覽器沒有特定功能，因此這應該是一個可行的跨瀏覽器解決方案。

Answer 2

嘗試設置display: inline在<li>元素上。