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

前端之家收集整理的这篇文章主要介绍了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.f2er.com/html/227484.html

猜你在找的HTML相关文章