占位符自动换行在输入字段中 [英] Placeholder auto wrap inside a input field
本文介绍了占位符自动换行在输入字段中的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我需要在输入字段中放置一个长的 placeholder
文本.
I need to put a long placeholder
text inside a input field.
但是,占位符
由于其长文本而将被剪切.
However, the placeholder
will be cut due to its long text.
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<label for="password">
<input id="password" name="user[password]" placeholder="Password (at least 8 letters, numbers, or punctuation marks)" size="30" type="password">
</label>
有什么办法让它成为这个吗?
Is there any way to make it become this?
推荐答案
input{
height:50px;
}
::-webkit-input-placeholder { /* Chrome/Opera/Safari */
white-space:pre-line;
position:relative;
top:-7px;
}
::-moz-placeholder { /* Firefox 19+ */
white-space:pre-line;
position:relative;
top:-7px;
}
:-ms-input-placeholder { /* IE 10+ */
white-space:pre-line;
position:relative;
top:-7px;
}
:-moz-placeholder { /* Firefox 18- */
white-space:pre-line;
position:relative;
top:-7px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<label for="password">
<input id="password" name="user[password]" placeholder="Password (at least 8 letters, numbers, or punctuation marks)" size="30" type="password">
</label>
这篇关于占位符自动换行在输入字段中的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文