JQuery UI 对话框不水平滚动 - 文本调整为对话框大小

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/