jquery 手机 ui-select 文字太长 iphone

Question

Jquery 移动应用程序。我在 table 单元格中有一个 select。 United States Minor Outlying Islands 的 select 对于 iphone 4/5/6 来说太宽了，并且 table 被拉伸以适合其内容并被屏幕裁剪。如何将 selection 文本显示为类似 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-layout 设置为 fixed 后，

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

table 列在 jquery 移动环境中彼此重叠。

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

计算出来的tablecss似乎正常

-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

.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

Answer 2

尝试在 table 上设置 table-layout: fixed。这可以防止 table 宽度超出其设置宽度，因此列内容将 shrink/grow 与页面大小一致。

<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

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

jquery 手机 ui-select 文字太长 iphone

jquery mobile ui-select text too long for iphone

css

jquery-mobile

select

ellipsis