如何阻止jquerymobile截断标签中的文本? [英] How to stop jquerymobile from truncating text in label?

问题描述

我在.net MVC4中运行的jquerymobile中有此页面

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

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?

推荐答案

根据更新的问题，以下是解决方案.文本样式由带有.ui-btn-inner类的 包装，按钮文本样式如下所示.

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

演示JSfiddle

这篇关于如何阻止jquerymobile截断标签中的文本?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！