Html 占位符字体大小大于 16px
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/30916387/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Placeholder font-size bigger than 16px
提问by Valdemar Edvard Sandal Rolfsen
I have read a couple of articles about styling the placeholder of an input field using ::-webkit-input-placeholderin HTML5. It works perfectly, except for one thing.
我已经阅读了几篇关于::-webkit-input-placeholder在 HTML5 中使用的输入字段占位符样式的文章。它工作得很好，除了一件事。
If I try to increase the font-size to a value higher than 16px, the text gets "cut" at the bottom. This happens regardless of height and padding of the input itself. Does anyone know a way of avoiding this problem, either using pure CSS or javascript?
如果我尝试将字体大小增加到高于 16px 的值，文本会在底部被“剪切”。无论输入本身的高度和填充如何，都会发生这种情况。有没有人知道使用纯 CSS 或 javascript 避免这个问题的方法？
I have added a screenshot of two inputfields where the placeholders have an font-size of 20px
我添加了两个输入字段的屏幕截图，其中占位符的字体大小为 20px
Jsfiddle: https://jsfiddle.net/bvwdg86x/
jsfiddle：https://jsfiddle.net/bvwdg86x/
回答by gfullam
The input and its placeholder must have matching font styles
输入及其占位符必须具有匹配的字体样式
input {
width: 400px;
padding: 0 20px;
}
input,
input::-webkit-input-placeholder {
font-size: 20px;
line-height: 3;
}<input type="text" placeholder="My Cool Placeholder Text">回答by Dave O'Brien
Placeholder styles will not resize an input field and will not affect its box model. Add font-size to your input to fix the placeholder from getting cut off.
占位符样式不会调整输入字段的大小，也不会影响其框模型。将 font-size 添加到您的输入中以修复占位符被切断的问题。
You also might consider adding placeholder styles for other browsers...
您还可以考虑为其他浏览器添加占位符样式...
::-moz-placeholder {} /* Firefox 19+ */
:-moz-placeholder {} /* Firefox 18- */
:-ms-input-placeholder {} /* IE */
回答by Mohammed Zaid
You have to add 'overflow: visible' to the placeholder in your css to get rid of the cropping.
您必须在 css 中的占位符中添加“溢出：可见”以摆脱裁剪。
::placeholder{
overflow: visible;
}
回答by imnik18
input {
width: 450px;
padding: 0px 15px;
}
input,
input::-webkit-input-placeholder {
font-size: 25px;
line-height: 4;
}<input type="text" placeholder="My Cool Placeholder Text">回答by WoIIe
Meanwhile, the browser vendors implemented the ::placeholderCSS pseudo-element.
同时，浏览器厂商实现了::placeholderCSS 伪元素。
You can find the current state of browser compatibility on caniuse.com.
您可以在caniuse.com上找到浏览器兼容性的当前状态。
Currently (2019-04-29) there are following notes:
目前（2019-04-29）有以下注意事项：
::-webkit-input-placeholder for Chrome/Safari/Opera (Chrome issue #623345)
::-ms-input-placeholder for Edge (also supports webkit prefix)
::-webkit-input-placeholder for Chrome/Safari/Opera（Chrome 问题 #623345）
::-ms-input-placeholder for Edge（也支持 webkit 前缀）
