如何将单词分成两部分并将它们放在一起

Question

我想做一个看起来像这样的菜单栏：

所以这些单词应该在中间切割并放在彼此之下：

外延
 sodes

＆＃13;

＆＃13;

 ul{
list-style-type: none;
font-size: 20pt;
}


li{
display: inline;
padding: 0px 30px;
word-wrap: break-word;
}

＆＃13;

<div id="menu"> 
  <div id="flip">Click to slide the panel down or up</div>
  <div id="panel"> 	
  <ul>
      <li> EPIS- ODER </li>
      <li> KARAK- TERER </li>
      <li> OM- OSS </li>
      <li> PRODU- KSJON </li>
  </ul>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;       

感谢所有帮助！:)