jQuery мобильный 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-мобильной среде.

<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