JQuery用戶界面對話框沒有水平滾動 - 調整到對話框的大小

Question

看到這裏http://jsfiddle.net/leopardy/wn2q5s3c/3/

文本小提琴文本被強制到下一行，在對話框的寬度。查看「第四級」文本和「第五級」文本。我希望它保持在同一行，並且需要用滾動條查看寬度邊界外的文本。

做一個快速的黑客只是爲了測試，如果我在某些長文本沒有空格扔那麼它滾動我怎麼想它，但文本仍被迫下一行http://jsfiddle.net/leopardy/nvmbsdcy/2/ 我已經嘗試設置溢出在div上滾動樣式，但沒有解決它。我可能沒有做到正確。

的Javascript

jQuery("#tree").dialog({ 
     autoOpen: true, 
     title: "Backup Subpaths", 
     resizable: false, 
     width: 300, 
     height: 400, 
     modal: true 
}); 

HTML

<div id="tree" style=" overflow:scroll"> 
     <ul> 
      <li><a>First Level</a> 
      <ul> 
       <li><a>Second Level</a></li> 
       <li><a>Second Level</a></li> 
       <li><a>Second Level</a></li> 
      </ul> 
      </li> 
      <li><a>First Level</a> 
      <ul> 
       <li><a>Second Level</a> 
      <ul> 
       <li><a>Third Level</a></li> 
       <li><a>Third Level</a></li> 
       <li><a>Third Level</a> 
      <ul> 
       <li><a>Fourth Level</a></li> 
       <li><a>Fourth Level</a></li> 
       <li><a>Fourth Level</a> 
      <ul> 
       <li><a>Fifth Level</a></li> 
       <li><a>Fifth Level</a></li> 
       <li><a>Fifth Level</a></li> 
      </ul> 
      </li> 
      </ul> 
      </li> 
      </ul> 
      </li> 
       <li><a>Second Level</a></li> 
      </ul> 
      </li> 
      <li><a>First Level</a> 
      <ul> 
       <li><a>Second Level</a></li> 
       <li><a>Second Level</a></li> 
      </ul> 
      </li> 
      <li><a>Another Level</a> 
      <ul> 
       <li><a>Second Level</a></li> 
       <li><a>Second Level</a></li> 
      </ul> 
      </li> 
      <li><a>Another Level2</a> 
      <ul> 
       <li><a>Second Level</a></li> 
       <li><a>Second Level</a></li> 
      </ul> 
      </li> 
     </ul> 
    </div> 

Answer 1

嘗試添加一些CSS：

.ui-widget-content a { 
    clear: both; 
    overflow-x: hidden; 
    white-space: nowrap; 
    } 

我已經更新了小提琴： 請檢查： http://jsfiddle.net/wn2q5s3c/4/