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/

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

1 个答案: