How to stop jquerymobile from truncating text in label?

问题

I have this page in jquerymobile running in .net MVC4

<div data-role="header" data-theme="b" data-position="fixed">
     <h3 style="color:white;">
            Name
    </h3>
 <a href="#" data_icon="back"> Back </a>

    <div data-role="fieldcontain" class="test_row">
        <fieldset data-role="controlgroup" data-type="horizontal" class="test_row">
            <input id="radio3" name="testType" value="2" type="radio" checked="checked" class="test_type">
            <label for="radio3" class="test_type">All tests</label>
            <input id="radio1" name="testType" value="0" type="radio" class="test_type">
            <label id="test_type_label" for="radio1" class="test_type" >Automated</label>     
            <input id="radio2" name="testType" value="1" type="radio" class="test_type">
            <label for="radio2" class="test_type">Manual</label>
        </fieldset>
    </div>
</div>

CSS

.test_row .ui-btn {
    text-align: center;
}
.ui-field-contain .ui-controlgroup-controls {
    width: 100%;
}
.ui-controlgroup-controls .ui-radio {
    width: 33.3%;
}

http://jsfiddle.net/ruds5/jsfiddle

When you resize the result, middle word (Automated) is truncated into shorter form with '...' at the end.

Is it possible to prevent truncating at the end of the word?

回答1:

Based on the updated question, here is the solution. The text style is wrapped with a with class .ui-btn-inner, button text style is overidden as follows.

span.ui-btn-inner {
 white-space: nowrap !important;
 overflow: visible !important;
}

Demo JSfiddle

回答2:

Omar was correct with previous version of Jquery mobile. But with version 1.4.1 there is no more span, use:

.ui-btn-inline {
  white-space: nowrap !important;
  overflow: visible !important;
}

来源：https://stackoverflow.com/questions/15729146/how-to-stop-jquerymobile-from-truncating-text-in-label

标签

jquery-mobile

truncation