文本输入包装在2行上
我在文本输入上看到一些奇怪的行为,当文本太长时,它们会换行到2行.
它们有填充物,宽度为100%.如果我删除这两个CSS规则中的任何一个,文本将停止换行.
我无法将我的实际网站设置为现场,当我尝试重新创建问题时(例如使用jsfiddle)我无法重新创建它.以下是我的iPhone屏幕截图:
可能是什么导致了这个？这不是默认行为,但我的设计需要填充和100%宽度,所以我需要找到另一种防止包装的方法.
更新正如我所说,我无法重现这个问题.我的尝试如下.我已经使用chrome dev工具来复制所有CSS规则,并且html是相同的,但结果不会换行.
http://codepen.io/anon/pen/uHCav
<div class="cont">
<div class="one">
<input placeholder="Middle name" type="text" maxlength="40" name="middle" id="edit-middle" size="60" value="" >
</div>
</div>
.cont {
background: grey;
width: 300px;
margin-left: 100px
}
*, *:before, *:after {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
input {
border-left-color: #e35235 !important;
}
input {
border-left-style: solid;
border-left-color: #c9d8e6;
border-left-width: 6px !important;
font-size: 1.2em;
border-top: none !important;
border-bottom: none !important;
border-right: none !important;
}
input {
background: white;
}
input {
padding: 15px 37px 15px 14px;
}
input {
margin: 0;
border: none;
outline: none;
}
input {
width: 100%;
-webkit-appearance: none;
appearance: none;
-moz-border-radius: 0;
-webkit-border-radius: 0;
border-radius: 0;
background-color: transparent;
}
input {
font-weight: 300;
}
input {
-webkit-text-fill-color: #19465e;
}
input {
color: #19465e;
}
.one {
margin-left: -20px;
margin-right: -20px;
}
首先削减你的文档。
创建一个仅包含基础知识的新（空白）页面
<!DOCTYPE html>
<html>
<head>
<title>My page title</title>
</head>
<body>
<div class="cont">
<div class="one">
<input placeholder="Middle name" type="text" maxlength="40" name="middle" id="edit-middle" size="60" value="" >
</div>
</div>
</body>
</html>
简化你的输入CSS，只是基础知识
input {
font-size:1.2em;
background:#DDD;
padding:15px 37px 15px 14px;
border:none;
outline:none;
width:100%;
}
您会注意到输入不会换行，并且仍然有width: 100%;填充。
一次一点地添加文档的其余部分：
- Javascript - 检查输入没有问题
- 其余的CSS - 检查输入没有问题
- 输入的任何剩余样式 - 检查输入是否有问题
- 任何缺失的 HTML - 检查输入是否有问题
将拼图一次一块地重新组装起来，并边做边清理代码。