سؤال

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?

هل كانت مفيدة؟

المحلول

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

نصائح أخرى

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;
}
مرخصة بموجب: CC-BY-SA مع الإسناد
لا تنتمي إلى StackOverflow
scroll top