2016-09-29 118 views
8

内占位自动换行我需要把一个长placeholder文本输入字段中。一个输入字段

然而,placeholder会因削减其长文本。

<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>

有没有什么办法让它变成这样? enter image description here

+1

我真的添加此作为提示的上方或下方的输入栏,而不是试图去挤这一切的占位符文本 –

+1

一个很好的方式,实际上,我最终使用'tooltip'而不是'placeholder' –

+0

听起来像是我的一个很好的解决方案 –

回答

7

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>

+0

哇,这很酷。 –

+0

谢谢科达昌 – Gowtham

+0

那是可能只会让'(至少8个字母,数字或标点符号)'小包裹像上面的图片? –

2

你可以做这样的事情

enter code here 

example

+0

这是一个很好的文字输入技巧。但是如果输入是密码 –

+0

那也是我所关心的。 –

+0

你不能。它的设计是多行的唯一HTML表格元素是