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

Question

我有两个 jQuery 移动按钮在一个 fieldset 内，想要改变其中一个按钮的 font-size。我尝试添加内联样式但没有成功。

我也尝试了以下方法但同样没有成功：

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

这是发生的情况（仅适用于iPhone）：

由于iPhone的屏幕尺寸，"请求更改"按钮被切断了。

有没有办法改变按钮文本的字体大小，以便显示完整文本而不被切断？

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按钮文字自动换行
• 在运行时更改jQuery Mobile按钮的字体大小

- Farhan Ahmad

---

你尝试过在font-size值中使用%吗？ - jzacharia

是的，我已经尝试过了。没有运气 :( - Farhan Ahmad

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

- Nirmal Patel

---

@Nirmal Patel：这应该是 text-overflow: inherit; 而不是 initial 吗？ - Mithun Satheesh

问题在于这会影响所有按钮。 - dsdsdsdsd

初始或剪辑（默认为文本溢出） - Nirmal Patel

为了仅对特定按钮进行样式设置，请将这些样式限定在包含按钮的父容器中。 - Nirmal Patel

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>

相关信息：

• 通过CSS调整按钮大小

- Phill Pafford

---

这是一个不错的解决方案，但在我的情况下，Nirmal的解决方案对我更有效。感谢您的帮助 :) - Farhan Ahmad