在 jQuery mobile 中更改按钮文本的字体大小答案

【问题标题】：change font size of button text in jQuery mobile在 jQuery mobile 中更改按钮文本的字体大小
【发布时间】：2012-07-26 15:10:35
【问题描述】：

我在 fieldset 中有 2 个 jQuery 移动按钮，并且想更改其中一个按钮的 font-size。我尝试添加内联样式，但没有奏效。

我也试过这个，但也没有用：

.myButton
{
   word-wrap: break-word !important;
   white-space: normal !important;
}

这是正在发生的事情：（仅在 iPhone 上）

由于 iPhone 的屏幕尺寸，“请求更改”按钮正在被切断。

有没有办法让我更改按钮文本的font-size，使其显示完整的文本而不会被截断？

HTML：

<fieldset class="ui-grid-a">
    <div class="ui-block-a">
        <input data-mini="true" type="submit" value="Cancel"  name="Submitbutton" class="button button-link"/>
    </div>
    <div class="ui-block-b">
        <input data-mini="true" data-theme="b" type="submit" value="Request Change" name="Submitbutton" class="button button-link" /> 
    </div>
</fieldset>

我试过了：

【问题讨论】：

您是否尝试过将% 用于font-size 值？
是的，我试过了。没有运气:(

标签： javascript jquery css mobile jquery-mobile

【解决方案1】：

使用以下内容查找 iPhone 屏幕上的最佳选择

.ui-btn-inner{
    text-overflow: initial; /* Get rid of the ellipsis */
    padding-left: 5px; /* Play with padding to make max use of available button width */
}
.ui-btn-text {
    font-size: 15px; /* Play with font size of the text */
}

【讨论】：

正是我想要的。谢谢:)
@Nirmal Patel：这应该是 text-overflow:inherit; 而不是 initial？
问题在于它会影响所有按钮
初始或剪辑（文本溢出的默认值）
如果只为特定按钮设置样式，请将这些样式设置为特定于按钮的父容器。

【解决方案2】：

现场示例：

http://jsfiddle.net/Pjvvx/（宽度）
http://jsfiddle.net/3DSGT/（身高）

JS：

// For all buttons use something like this
$('.ui-btn').css('width','50%');

// For individual buttons use something like this
$('#theButton1').parent().css('width', '75%');

// Or this for HREF data-role buttons
$('#hrefButton4').css('width', '45%');

// this changes the height for all buttons
$('.ui-btn-text').css('font-size','50px');

// This changes the height for a single element 
$('#hrefButton3').children().children().css('font-size','30px');

我认为你正在寻找这样的事情：

$('#hrefButton3').children().children().css('font-size','10px');

HTML：

<div data-role="page" id="home"> 
    <div data-role="content">
        <input type="button" id="theButton1" value="Press Me 1" />
        <input type="button" id="theButton2" value="Press Me 2" />
        <input type="button" id="theButton3" value="Press Me 3" />
        <input type="button" id="theButton4" value="Press Me 4" />
        <br />
        <a href="#" data-role="button" id="hrefButton1">HREF Me 1</a>
        <a href="#" data-role="button" id="hrefButton2">HREF Me 2</a>
        <a href="#" data-role="button" id="hrefButton3">HREF Me 3</a>
        <a href="#" data-role="button" id="hrefButton4">HREF Me 4</a>
    </div>
</div>