设为首页 - 加入收藏 ASP站长网(Aspzz.Cn)- 我们致力于打造专业的站长资讯、交流、合作平台!
热搜: 创业者 手机 数据
当前位置: 首页 > 综合聚焦 > 资源网站 > 资源 > 正文

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

发布时间:2021-01-01 02:14 所属栏目:[资源] 来源:网络整理
导读:好的,我发现 input里面的文字了.即使 input标签仍然被切断.标签已经有一个填充.将字体样式设置为草书时,您会注意到更多. 看看这张图片: 屏幕截图中的第一个文本框是type = text的输入,第二个文本框只是一个div.输入文本框会切断字符’j’的尾部,而div文本框

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

(编辑:ASP站长网)

    网友评论
    推荐文章