android - jQuery 移动按钮只显示一个词而不是两个.. 为什么？

Question

我的代码：

<a data-theme="my-site" data-role="button" onClick="checkReachability()">Online Map</a> 

当我启动一个应用程序时，我只得到了“地图”按钮，而不是“在线地图”。我觉得很奇怪。顺便提一下，我是 jQuery Mobile 初学者。

应用程序在 Android 手机上运行。

CSS：

.ui-btn-up-my-site { 
    color: white !important;
    text-overflow: initial;
    font-size:15px !important;       
    border: 1px solid #333;
    padding-top:0 !important;
    margin-top:-25px !important;
    width:100px !important; 
    white-space: normal !important;             
}

Answer 1

您已设置字体大小和宽度，使得“在线地图”不适合您的按钮

font-size:15px !important;
width:100px !important;

你可以让你的字体更小或者让你的按钮更大。您还可以使用以下方法根据文本的宽度设置按钮宽度

display:inline-block;
# width: 100px !important; Comment out or delete this line.

看看它在行动 -小提琴

顺便说一句，您应该尽量避免使用!important. 使用 CSS 特异性和排序来确保将正确的样式应用于正确的元素。