javascript 更改 jQuery Mobile 中按钮文本的字体大小
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11672421/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
change font size of button text in jQuery mobile
提问by Farhan Ahmad
I have 2 jQuery mobile buttons inside a fieldsetand would like to change the font-sizeof one of the buttons. I have tried adding an inline style but that did not work.
我在 a 中有 2 个 jQuery mobile 按钮，fieldset并且想更改font-size其中一个按钮的 。我曾尝试添加内联样式，但没有奏效。
I have also tried this but that did not work as-well:
我也试过这个，但也没有奏效：
.myButton
{
word-wrap: break-word !important;
white-space: normal !important;
}
This is what is happening: (only on the iPhone)
这就是正在发生的事情：（仅在 iPhone 上）
Because the screen size of the iPhone, the "Request Change" button is being cut-off.
因为 iPhone 的屏幕尺寸，“Request Change”按钮被截断了。
Is there a way for me to change the font-sizeof the button text so that it shows the complete text without getting cut-off?
有没有办法让我更改font-size按钮文本的 ，以便它显示完整的文本而不会被截断？
HTML:
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>
I have tried:
我努力了：
回答by Nirmal Patel
Play with the following to find what's best on the iPhone screen
玩以下游戏以找到 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 */
}
回答by Phill Pafford
Live Example:
现场示例：
- http://jsfiddle.net/Pjvvx/(Width)
- http://jsfiddle.net/3DSGT/(Height)
JS:
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');
I think you're looking to do something like this:
我认为你正在寻找做这样的事情：
$('#hrefButton3').children().children().css('font-size','10px');
HTML:
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>
Related:
有关的：
