jquery mobile ui-select文本对于iphone来说太长了

Question

Jquery 移动应用程序。我在表格单元格中有一个选择。 United States Minor Outlying Islands 的选择对于 iphone 4/5/6 来说太宽，并且表格被拉伸以适合其内容并被屏幕剪切。如何将选择文本显示为省略号，如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