多行文本框中显示的输入框答案

【问题标题】：Input box showing in multiple lines text box多行文本框中显示的输入框
【发布时间】：2011-07-12 10:36:13
【问题描述】：

问题很简单，
下图是一个输入文本框。我已经设置了输入框值的值。加载页面时，它以多行显示。这只发生在 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;
}

字体缩小后的另一张图片：

【问题讨论】：

当你选中那个框并自己写一些比宽度长的东西时，它会溢出到另一行吗？
是否还有样式正在应用这个jsFiddle 在 Chrome 中看起来不错。你觉得它怎么样？
@ancide：当我写更长的东西时，第一个字母进入下一行，继续它进入同一行。
已解决：已从 css 中删除：div{word-break:break-word}

标签： php html css input

【解决方案1】：

你可以设置一个“溢出”：

overflow:scroll;

这会让它滚动...

但这是因为文字太长了……要么变宽，要么缩小文字大小。

【讨论】：

滚动让它更向下。我想要一个输入框，就像一个普通的一样。我试过overflow:hidden; 但它不起作用。

【解决方案2】：

尝试减小其 css 中的字体大小或增大框的高度

在文本的 css 中，添加 padding-bottom 并把它例如设置为 3px...试试吧！

【讨论】：

@Shahal Tharique：但不要删除css，只更改文本的字体大小并少放。例如到 11px

【解决方案3】：

为输入框创建一个 css 类，例如： .input_box {height:23px;width:600px;font-size:14px;} 并使用它。如果文本环绕，请尝试更改宽度和高度。

【讨论】：

解决了，问题出在css中的div{word-break:break-word}。知道 div 如何影响输入。
@Shahal Tharique -- 欢迎来到 SO！现在您有了答案，您应该继续提交它作为问题的答案，然后单击大复选标记以接受它。这会将问题标记为已解决，并为每个人指明未来的正确解决方案。

【解决方案4】：

我自己发现了问题（但仍然不明白为什么），一定是 chrome 中的错误。

我尝试从 css 中删除以下行：

div{
   word-break:break-word;
}

tada.. 它就像魅力一样。所以这一定是chrome中的一个错误。

【讨论】：