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