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

概述好的,我发现< input>里面的文字了.即使< input>标签仍然被切断.标签已经有一个填充.将字体样式设置为草书时,您会注意到更多. 看看这张图片： 屏幕截图中的第一个文本框是type = text的输入,第二个文本框只是一个div.输入文本框会切断字符’j’的尾部,而div文本框则不会. HTML： <input type="text" value="juvenescent" /><di 好的,我发现< 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/

总结

以上是内存溢出为你收集整理的html – 为什么即使已经填充了标签内的文本也会被切断？全部内容，希望文章能够帮你解决html – 为什么即使已经填充了标签内的文本也会被切断？所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。