HTML текст тег работает в следующую строку на мобильный

Question

Мой код следующим образом

<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, текст переходит к следующей строке, когда он больше т han ширина. Я думал, что textarea является единственным тегом HTML, который имеет многострочный. Не знаете, почему текст здесь идет многострочный и как его избежать? Я не против, отрезав текст, но я действительно не хочу, чтобы он проходил многолинейную линию.

Answer 1

Try применения overflow: auto в поле

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

Вы, возможно, потребуется установить высоту входного элемента ввода, я не совсем уверен, что вы пытаетесь достичь здесь. Вы можете установить overflow-x: auto, если вы только хотите, чтобы прокручивать по горизонтали или overflow-y для вертикальной прокрутки

Answer 2

Так как я установил его сейчас, я сделал следующий

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

я по крайней мере получил мульти-строку исчезают, но если есть более элегантный способ (jQuery эллипсис кажется приятным, но я не получил его на работу), пожалуйста, дайте мне знать.