UI 滚动列表视图通过屏幕延伸，切断右边框

Question

我正在使用html和javascript开发一个应用程序。我在一页上有一个 ui-scrolllistview，并且我可以正常填充它。但是，如果一个单词对于列表视图来说太大，它只会扩展它的宽度，使其退出屏幕。

有没有办法在 ui-scrolllistview 中设置单词或自动换行词的长度，以便它不会切断 ui-scrolllistview 的右边框？

谢谢

编辑

这是我使用 UI 滚动列表创建页面的代码

<div data-role="page" data-theme="f" id="choose-building">
    <div data-role="header" data-theme="f" data-position="fixed"  data-tap-toggle="false">
    <h1><img src="images/building.png" height="80px"></h1>
        <div data-role="controlgroup" class="ui-btn-right topzero">
        <a href="#" data-rel="back"  data-role="button" data-inline="true"  data-direction="reverse">Back</a>
        <a id="applyFilter" data-role="button" data-inline="true" onClick="pickedBuildings();">Chosen Buildings</a>
        </div>
    </div>
    <div data-role="content" data-scroll="Y" class="ui-scrolllistview" >
        <form>
        <div data-role="fieldcontain">          
            <fieldset data-role="controlgroup" id="CatagoryChooseBuilding" >
            </fieldset>
        </div>
        </form>
    </div>
    <div data-role="footer" data-theme="f" data-position="inline" data-id="main-footer"  data-tap-toggle="false">
        <div data-role="navbar" >
        <ul>
            <li><a href="#home" data-role="button" data-icon="myapp-home" >Home</a></li>
            <li><a href="#page-map" data-role="button" data-icon="myapp-building-a" >Buildings</a></li>
            <li><a href="#more" data-role="button" data-icon="myapp-more" >More</a></li>
        </ul>
        </div><!-- /navbar -->
    </div><!-- /footer -->  
</div>

Answer 1

我相信

听起来你正在寻找text-overflow和white-space，可能overflow。

您可以使用这些不同的 CSS 属性在设置margins和padding后以您想要的任何尺寸停止文本。

text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;

编辑：示例

您可以调整边距属性，直到将文本移动到远离滚动条的位置。

编辑：如果要允许自动换行，其中框架（根据您的标签jQuery移动版）为您截断它，请在包含文本的最内层元素上指定overflow: visible;和white-space:normal;

如果您没有看到预期和希望的行为更改，请通过"开发人员工具"窗口查看页面。这些都内置在Chrome和IE中，你可以使用Firebug进行Firefox。这些允许您"动态"测试样式表更改，这听起来像是获得预期行为所需的内容。