Css 文本输入换行到两行_Css_Mobile Safari

Css 文本输入换行到两行

css

Css 文本输入换行到两行,css,mobile-safari,Css,Mobile Safari,我在我的文本输入中看到一些奇怪的行为，当文本太长时，它们会换行到两行它们有衬垫，100%宽。如果删除这两条CSS规则中的任何一条，文本将停止换行我不能把我的实际网站上线，当我尝试重新创建这个问题时（例如使用JSFIDLE），我不能重新创建它。以下是我的iPhone的屏幕截图：这可能是什么原因造成的？这不是默认行为，但填充和100%宽度是我的设计所必需的，因此我需要找到另一种防止包装的方法正如我所说，我无法重新创建该问题。我的尝试如下。我使用chrome开发工具复制了所有CSS规则，ht

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

它们有衬垫，100%宽。如果删除这两条CSS规则中的任何一条，文本将停止换行

我不能把我的实际网站上线，当我尝试重新创建这个问题时（例如使用JSFIDLE），我不能重新创建它。以下是我的iPhone的屏幕截图：

这可能是什么原因造成的？这不是默认行为，但填充和100%宽度是我的设计所必需的，因此我需要找到另一种防止包装的方法

正如我所说，我无法重新创建该问题。我的尝试如下。我使用chrome开发工具复制了所有CSS规则，html是相同的，但是结果没有包装


续{
背景：灰色；
宽度：300px；
左边距：100px
}
*，*：之前，*：之后{
-moz框大小：边框框；
-webkit框大小：边框框；
框大小：边框框；
}
输入{
左边框颜色：#e35235！重要；
}
输入{
左边框样式：实心；
左边框颜色：#c9d8e6；
边框左侧宽度：6px！重要；
字体大小：1.2米；
边界顶部：无！重要；
边框底部：无！重要；
右边界：没有！重要；
}
输入{
背景：白色；
}
输入{
填充：15px 37px 15px 14px；
}
输入{
保证金：0；
边界：无；
大纲：无；
}
输入{
宽度：100%；
-webkit外观：无；
外观：无；
-moz边界半径：0；
-webkit边界半径：0；
边界半径：0；
背景色：透明；
}
输入{
字体大小：300；
}
输入{
-webkit文本填充颜色：#19465e；
}
输入{
颜色：19465e；
}
.一{
左边距：-20px；
右边距：-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>

input {
    font-size:1.2em;
    background:#DDD;
    padding:15px 37px 15px 14px;
    border:none;
    outline:none;
    width:100%;
}

您会注意到输入将不会换行，并且您仍然有

width:100%和填充
一次添加一位文档的其余部分：
Javascript-检查输入是否没有问题
CSS的其余部分-检查输入是否没有问题
输入的任何剩余样式-检查输入是否没有问题
任何缺少的HTML-检查输入是否没有问题
将拼图一块一块地放回原处，然后边走边清理代码。
将宽度：100%
替换为位置：绝对；左：0；右：0如果你需要一个快速而肮脏的修复程序。只需确保容器div具有适当的规则即可
作为补充说明，将所有这些输入规则放在单独的样式块中是非常糟糕的做法。如果可能的话，尝试将这些问题合并为一个问题。
通常此类问题与框大小上下文相关。您可以尝试为输入定义边框上下文以忽略填充计算：
input {
  box-sizing: border-box;
}

您的输入可能继承了一个分词
属性。尝试添加分词：正常
到输入。
可以肯定的是，您是否使用了
？能否为这些文本框添加准确的CSS规则？还有任何继承的CSS。@jdln您能为我们提供html
和CSS
或。。目前为止，我们只能看到一个图像。您确定输入仍然是一个类型吗？是否有可能外部js库正在将输入转换为其他类型？您在手机中使用哪种浏览器。有些浏览器（如UC浏览器或新的opera浏览器）这样做是为了方便输入框的大小调整边框框的大小不会忽略填充计算，它只是使用定义的宽度作为元素的外部边界。填充仍将添加到元素中，除非使用框大小：边框框，否则文本的空间将更小。这也可能有助于运行某种CSS。非常好的调试建议，但没有回答问题。完全正确，它没有。不过，间接地说，它可能会；当我发布这个答案时，已经有一两天没有人回复了。我想我会改变规则。如果必须删除，则标记为删除。
input {
  box-sizing: border-box;
}