我的代码如下
<div data-role="content" id="div1" align="top" style="padding:3 !important;" >
<table border="0" align="CENTER" cellspacing="0" width="100%" style="vertical- align: text-bottom;" >
<tr>
<td></td>
<td>
<div id="question1" class="question">
<input type="text" id="question" />
<Style>
#question{
font:5px;
font-family:verdana;
}
</style>
</div>
</td></tr><tr>
<td width="50"><img id="img2" width="40" height="36" style="float:right; margin-top: 0px;" ></td>
<td style="text-align:center;">
<div class="ui-grid-b" >
<div class="ui-block-a"><button id="button1" type="submit" data-theme="b" style="font-size:0.8em;"></button></div>
<div class="ui-block-b"><button id="button2" type="submit" data-theme="b" style="font-size:0.8em;"></button></div>
<div class="ui-block-c"><button id="button3" type="submit" data-theme="b" style="font-size:0.8em;"></button></div>
</div>
</td>
</tr>
</table>
</div>
在上面的代码块中,下面的代码行
<input type="text" id="question" />
当值通过jQuery填充时,我所做的就是
$('.question').text(questionText);
当我在iPhone中查看这个时,当文本比宽度长时,它会转到下一行。我认为textarea是唯一的HTML标签有多行。不知道为什么这里的文本是多行,我如何避免它?我不介意文本被截断但是我真的不希望它变成多行
尝试将overflow: auto
应用于输入字段
<style type="text/css">
input[type=text] { overflow: auto; }
</style>
你可能需要设置输入元素的高度,我不确定你在这里想要实现什么。如果你只想让它水平滚动,你可以设置overflow-x: auto
,或者设置overflow-y
为垂直滚动
现在我修复它的方法是,我做了以下操作
<div id="question1" class="question" style="height: 12px;">
<input type="text" id="question" />
<Style>
#question{
font:5px;
font-family:verdana;
}
</style>
</div>
我至少得到了多行消失,但如果有一个更优雅的方式(jQuery省略号似乎不错,但我没有得到它的工作),请让我知道。