html文本标签在移动设备上运行到下一行答案

【问题标题】：html text tag running into the next line on mobilehtml文本标签在移动设备上运行到下一行
【发布时间】：2013-04-11 00:08:31
【问题描述】：

我的代码如下

<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 标签。不知道为什么这里的文字是多行的，我该如何避免它？我不介意文本被切断，但我真的不希望它变成多行。

【问题讨论】：

标签： html text input multiline

【解决方案1】：

尝试将overflow: auto 应用于输入字段

<style type="text/css">
    input[type=text] { overflow: auto; }
</style>

您可能需要设置输入元素的高度，我不确定您要在这里实现什么。如果只想水平滚动，可以设置overflow-x: auto，或者垂直滚动设置overflow-y

【讨论】：

溢出：自动不起作用。我试图做溢出：隐藏，但这似乎以文本开始显示在按钮后面的方式弄乱了用户界面。

【解决方案2】：

所以我现在修复它的方法是，我做了以下

<div id="question1" class="question" style="height: 12px;">
            <input type="text" id="question" />
        <Style>
            #question{
              font:5px;
              font-family:verdana;
            }
        </style>        
        </div>

我至少让多行消失了，但如果有更优雅的方式（jQuery 省略号看起来不错，但我没有让它工作），请告诉我。

【讨论】：