Question

我在文本输入上看到一些奇怪的行为，当文本太长时，它们会换行到2行。

他们有填充，宽度为100％。如果我删除这两个CSS规则中的任何一个，文本将停止换行。

我无法将我的实际网站设置为现场，当我尝试重新创建问题时（例如使用jsfiddle）我无法重新创建它。以下是我的iPhone屏幕截图：

enter image description here

可能导致这种情况的原因是什么？这不是默认行为，但我的设计需要填充和100％宽度，所以我需要找到另一种防止包装的方法。

更新正如我所说，我无法重现这个问题。我的尝试如下。我已经使用chrome dev工具来复制所有CSS规则，并且html是相同的，但结果不会换行。

<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;
}

Answer 1

您的输入可能具有word-break属性。尝试将word-break: normal;添加到输入中。

Answer 2

首先回收你的文件。

创建一个仅包含基本内容的新（空白）页面

<!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 - 检查输入没有问题

将拼图一次放回一个部分并随时清理代码。

Answer 3

如果您需要快速而肮脏的修复，请将width:100%替换为position:absolute; left:0; right:0;。只需确保您的容器div具有适当的规则。

作为旁注，将所有输入规则放在单独的样式块中是非常糟糕的做法。如果可能的话，尝试将它们合并为一个。

Answer 4

通常这类问题与盒子大小上下文有关。您可以尝试为输入定义边框上下文以忽略填充计算：

input {
  box-sizing: border-box;
}

文本输入包装在2行上

4 个答案: