您好,登錄后才能下訂單哦!
這篇文章主要講解了“怎么用CSS實(shí)現(xiàn)textArea中的placeholder換行功能”,文中的講解內(nèi)容簡(jiǎn)單清晰,易于學(xué)習(xí)與理解,下面請(qǐng)大家跟著小編的思路慢慢深入,一起來研究和學(xué)習(xí)“怎么用CSS實(shí)現(xiàn)textArea中的placeholder換行功能”吧!
textArea的placeholder不能換行。例如:
<textarea placeholder="第1行 \n 第2行 <br> 第3行 \A 第4行
第5行"></textarea>
這是不會(huì)起作用的,會(huì)原封不動(dòng)地輸出。
官方不認(rèn)為這是一個(gè)bug:
The placeholder attribute represents a short hint (a word or short phrase)
For a longer hint or other advisory text, the title attribute is more appropriate.
意思就是說placeholder表示的是一個(gè)簡(jiǎn)單的提示(一個(gè)詞或者一個(gè)短語),根本不需要換行。如文本太長(zhǎng),那就用title。
但是實(shí)際應(yīng)用中,我們有時(shí)需要換行。如何解決?很多時(shí)候我們用JavaScript來解決,其實(shí)CSS也可以實(shí)現(xiàn)。
由于placeholder屬性是可以用css操作的,所以我們可以用:after來把placeholder的內(nèi)容寫到CSS中,曲線救國(guó)。
CSS Code復(fù)制內(nèi)容到剪貼板
textarea::-webkit-input-placeholder:after{
display:block;
content:"line@ \A line#";/* \A 表示換行 */
color:red;
};
以上是webkit的代碼,F(xiàn)irefox類也有相應(yīng)的版本:
CSS Code復(fù)制內(nèi)容到剪貼板
textarea::-moz-placeholder:after{
content:"line@ \A line#";/* \A 表示換行 */
color:red;
};
感謝各位的閱讀,以上就是“怎么用CSS實(shí)現(xiàn)textArea中的placeholder換行功能”的內(nèi)容了,經(jīng)過本文的學(xué)習(xí)后,相信大家對(duì)怎么用CSS實(shí)現(xiàn)textArea中的placeholder換行功能這一問題有了更深刻的體會(huì),具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是億速云,小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章,歡迎關(guān)注!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。