jquery mobile ui-select text too long for iphone

Question

Jquery mobile application. I have a select in a table cell. the select of United States Minor Outlying Islands is too wide for iphone 4/5/6, and the table is stretched to fit its content and clipped by screen. How to display the selection text as ellipsis like United States Minor ... so that it will fit in the screen width.

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

The style from jquery-mobile.css

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

The style seems to intend for the purpose(text-overflow: ellipsis), but it did not work.

Thanks for help.

------------ EDIT ---------------

After setting table-layout to fixed as suggested,

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

table columns overlap each other in jquery-mobile environment.

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

The computed table css seems normal

-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

Try setting table-layout: fixed on your table. This keeps the table width from expanding beyond its set width and therefore the column contents will shrink/grow with the page size.

<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

Fixed table layout docs: 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

OR

This is using Jquery

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

Demo here