html – 为什么即使已经填充了标签内的文本也会被切断？

好的,我发现< 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

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

解决方法

看起来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/

原文地址：https://www.jb51.cc/html/227484.html