Question

Jquery移动应用程序。我在表格单元格中有一个选择。对于iphone 4/5/6，United States Minor Outlying Islands的选择范围太宽，并且表格会被拉伸以适应其内容并被屏幕剪切。如何将选择文本显示为省略号United States Minor ...，以便它适合屏幕宽度。

<table>

<tr>
<td>

<div class="ui-select">

  <div class="ui-btn ui-icon-carat-d ui-btn-icon-right ui-corner-all ui-shadow">
    <span class="ui-select-one-menu">United States Minor Outlying Islands</span>

    <select name="country" class="ui-select-one-menu" size="1"> 

       <option value="GS">South Georgia And The South Sandwich Islands</option>
       <option value="UM">United States Minor Outlying Islands</option>
       <option value="US">United States</option>

    </select>
  </div>
</div>

</td>
</tr>
</table>

来自jquery-mobile.css的样式

.ui-select .ui-btn > span:not(.ui-li-count) {
    display: block;
    text-overflow: ellipsis;
    overflow: hidden !important;
    white-space: nowrap;
}

这种风格似乎是出于此目的（文本溢出：省略号），但它不起作用。

感谢您的帮助。

------------编辑---------------

按照建议将表格布局设置为固定后，

table {
    width: 100%;
    table-layout: fixed;
}

表格列在jquery-mobile环境中相互重叠。

<table data-role="table" data-mode="columntoggle" 
       class="ui-responsive ui-table ui-table-columntoggle"> 
   ... 
</table>

计算表css似乎正常

-webkit-border-horizontal-spacing: 2px;
-webkit-border-vertical-spacing: 2px;
border-bottom-color: rgb(51, 51, 51);
border-bottom-style: none;
border-bottom-width: 0px;
border-collapse: collapse;
border-image-outset: 0px;
border-image-repeat: stretch;
border-image-slice: 100%;
border-image-source: none;
border-image-width: 1;
border-left-color: rgb(51, 51, 51);
border-left-style: none;
border-left-width: 0px;
border-right-color: rgb(51, 51, 51);
border-right-style: none;
border-right-width: 0px;
border-top-color: rgb(51, 51, 51);
border-top-style: none;
border-top-width: 0px;
clear: both;
color: rgb(51, 51, 51);
display: table;
font-family: sans-serif;
font-size: 14px;
height: 1012px;
line-height: 18.2000007629395px;
padding-bottom: 0px;
padding-left: 0px;
padding-right: 0px;
padding-top: 0px;
table-layout: fixed;
text-shadow: rgb(243, 243, 243) 0px 1px 0px;
width: 264px;

Answer 1

尝试在桌面上设置table-layout: fixed。这样可以防止表格宽度超出其设定宽度，因此列内容将随页面大小缩小/增长。

<table id="theTable">
    <tr>
        <td>
            <select name="country" class="ui-select-one-menu" size="1">
                <option value="GS">South Georgia And The South Sandwich Islands</option>
                <option value="UM">United States Minor Outlying Islands</option>
                <option value="US">United States</option>
            </select>
        </td>
    </tr>
</table>

#theTable{
    width: 100%;
    table-layout: fixed;
}

<强> DEMO

修复了表格布局文档：http://www.w3.org/TR/CSS21/tables.html#fixed-table-layout

Answer 2

.ui-select .ui-btn > span:not(.ui-li-count) {
  overflow: hidden;
    white-space: nowrap;
    text-overflow:ellipsis;

}

.ui-select-one-menu {
    width:200px;
}

Demo here

或

这是使用Jquery

var maxLength = 15; $('.ui-select-one-menu > option').text(function(i, text) { if (text.length > maxLength) { return text.substr(0, maxLength) + '...'; } });

Demo here

jquery mobile ui-select text for iphone

2 个答案: