Question

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

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

由于

修改

这是我的代码，用ui-scrolllist

创建页面

<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;

修改：Example

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

编辑：如果你想允许自动翻译框架（jQuery mobile根据你的标签）截断它，在包含你的文本的最内层元素上，指定{{1 }和overflow: visible;

如果您没有按预期和想要的那样看到行为更改，请通过“开发人员工具”窗口查看该页面。这些内置于Chrome和IE中，您可以使用Firebug for Firefox。这些允许您“动态”测试样式表更改，这听起来像您需要获得您期望的行为。

ui-scroll listview通过屏幕切割右边界延伸

1 个答案: