更改jQuery手机中按钮文本的字体大小

Question

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

我曾尝试：

• jquery mobile button text auto line break
• Change font size of a jQuery Mobile button at runtime

Answer 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 */ 
} 

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

相关：

• resizing a BUTTON through CSS