为什么即使已经有填充， <input> 标记内的文本也会被截断？答案

【问题标题】：Why does the text inside an <input> tag get cut off even if there's already a padding?为什么即使已经有填充， <input> 标记内的文本也会被截断？
【发布时间】：2022-01-09 23:19:43
【问题描述】：

好的，所以我发现 <input> 标记内的文本仍然被截断，即使 <input> 标记已经有填充。当您将字体样式设置为任何草书时，您会更加注意到它。

看看这张图片：

屏幕截图中的第一个文本框是 type=text 的输入，第二个文本框只是一个 div。输入文本框会截掉字符'j'的尾部，而div文本框不会。

HTML：

<input type="text" value="juvenescent" />
<div>juvenescent</div>

CSS：

input, div {
  font-family: cursive;
  font-size: 2em;
  padding: 15px 20px;
  margin-bottom: 10px;
  width: 300px;
  border: 1px solid black;
}

div {
  background-color: white;
}

这里是 jsfiddle 的链接： https://jsfiddle.net/9eLzqszx

这里的解决方法是什么？显然，我希望输入文本框的填充不要剪切其中的文本。

【问题讨论】：

您需要在 Fiddle 中包含字体。
寻求代码帮助的问题必须在问题本身中包含重现它所需的最短代码。尽管您提供了link to an example or site，但如果链接失效，您的问题对于未来遇到相同问题的其他 SO 用户将毫无价值。
我猜这是一个font-style:italic 问题，其中字体不是实际上 斜体，而是浏览器仿斜体。我敢肯定，我们以前见过这种情况。
是的，有时那些假斜体往往会呈现在文本边界矩形之外——然后在这种情况下，那些“突出”的部分会被简单地剪掉。
导致问题的不是仿斜体。这就是输入中文本的呈现方式。

标签： html css

【解决方案1】：

看起来 J 的曲线越过了浏览器认为是字母边缘的左侧。不要在两侧使用填充，而是在顶部/右侧/底部使用填充，而不是在左侧使用文本缩进，它应该可以解决问题！

input {
  font-family: cursive;
  font-size: 2em;
  padding: 15px 20px 15px 0;
  font-style:italic;
  margin-bottom: 10px;
  width: 300px;
  border: 1px solid black;
  text-indent: 20px;
}

https://jsfiddle.net/will0220/pxrs321f/3/

【讨论】：

我不会给text-indent添加这么大的值，因为如果用户写了一个大文本，文本会粘在左边。
我个人有点喜欢使用这种解决方案文本不会在边缘之前被截断，但这实际上只是一个偏好问题！
如果右边的文字被text-align: right剪切了怎么解决？

【解决方案2】：

输入元素是一个特殊元素，因为它需要剪切并允许用户浏览其文本。填充不会增加其活动文本区域，这就是您看到此行为的原因。 Firefox 似乎比这群人更聪明，因为如果文本的宽度小于输入的活动文本区域，它不会垂直剪切文本。

一种解决方法是添加text-indent 并减少padding-left：

text-indent: 5px;
padding-left: 15px; /* Originally 20px */

你可以在小提琴over here看到它。

【讨论】：

【解决方案3】：

您可以尝试增加行高属性。这将限制字母的可视区域，导致它们被截断。但是，如果您希望它与您的 div 大小匹配，这可能是一个糟糕的 hack。

【讨论】：

问题是水平填充，而不是垂直填充。

【解决方案4】：

将height: auto;添加到您的输入type=text以保持灵活性，并更改填充以获得原始效果，例如这样的填充：14px 20px;

【讨论】：

问题是水平填充，而不是垂直填充。