Поле ввода, отображаемое в нескольких строках

Question

Проблема проста,
Показанное ниже текстовое поле ввода. Я установил значение в поле ввода. Когда страница загружена, она отображается в несколько строк. Это происходит только с браузером Chrome. любая помощь

HTML:
<input type="text" name="q" id="search_q" value="why is this happening in the input box">

Вот css для поля ввода

input[type="text"], input[type="password"], select {
border: 1px solid #D1D3D4;
padding: 3px 5px;
border-radius: 4px;
background: white;
background: -moz-linear-gradient(top, white 0%, white 0%, #F2F2F2 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,white), color-stop(0%,white), color-stop(100%,#F2F2F2));
background: -webkit-linear-gradient(top, white 0%,white 0%,#F2F2F2 100%);
background: -o-linear-gradient(top, white 0%,white 0%,#F2F2F2 100%);
background: -ms-linear-gradient(top, white 0%,white 0%,#F2F2F2 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='white', endColorstr='#F2F2F2',GradientType=0 );
background: linear-gradient(top, white 0%,white 0%,#F2F2F2 100%);
}
map.generic.css:155
input, textarea {
margin: 0;
padding: 0;
font-family: Helvetica, Verdana, Arial;
color: #333;
font-size: 16px;
}
map.generic.css:148
input, a, div, textarea, img {
border-radius: 3px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
}
map.generic.css:142
input, a, div, textarea, img, li {
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}

еще одно изображение после уменьшения размера шрифта:

Answer 1

Я сам разобрался в проблеме (но до сих пор не понимаю, почему), должно быть ошибка в Chrome.

Я попытался удалить следующую строку из CSS:

div{
   word-break:break-word;
}

Тада .. это работает как шарм. Так что это должно быть ошибка в Chrome.

Answer 2

Вы можете установить «переполнение»:

overflow:scroll;

это сделает прокрутку ...

Но дело в том, что текст слишком длинный ... либо сделайте его шире, либо уменьшите размер текста.

Answer 3

Создайте класс CSS для поля ввода, например: .input_box {height: 23px; ширина: 600px; размер шрифта: 14px;} и используйте его.Попробуйте изменить ширину и высоту, если текст переносится.

Answer 4

Попробуйте уменьшить размер шрифта в css или на высоту поля

В css текста добавьте padding-bottom и поместите его, например, в 3px ... Попробуйте!