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

发布时间：2024-06-09 17:34:52 所属栏目：资源来源：DaWei

导读： 好的,我发现< input>里面的文字了.即使< input>标签仍然被切断.标签已经有一个填充.将字体样式设置为草书时,您会注意到更多.

看看这张图片：

屏幕截图中的第一个文本框是type = tex

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

（编辑：应用网_常德站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!