用CSS實(shí)現(xiàn)textArea中的placeholder換行功能
segmentfault 發(fā)布時(shí)間：2015-07-08 18:22:01 作者：weakish 
我要評論
我要評論這篇文章主要介紹了用CSS實(shí)現(xiàn)textArea中的placeholder換行功能,依照傳統(tǒng)方法書寫的話會出現(xiàn)問題,文中給出了解決方法,需要的朋友可以參考下
textArea的placeholder不能換行。例如：
<textarea placeholder="第1行 \n 第2行 <br> 第3行 \A 第4行
第5行"></textarea>
這是不會起作用的，會原封不動地輸出。
官方不認(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è)簡單的提示（一個(gè)詞或者一個(gè)短語），根本不需要換行。如文本太長，那就用title。
但是實(shí)際應(yīng)用中，我們有時(shí)需要換行。如何解決？很多時(shí)候我們用JavaScript來解決，其實(shí)CSS也可以實(shí)現(xiàn)。
由于placeholder屬性是可以用css操作的，所以我們可以用:after來把placeholder的內(nèi)容寫到CSS中，曲線救國。
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;
- };
相關(guān)文章
- 下面小編就為大家?guī)硪黄猚ss控制文字自動換行的實(shí)現(xiàn)方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-10-12
CSS控制文本超出指定寬度顯示省略號和文本不換行效果的實(shí)現(xiàn)
下面小編就為大家?guī)硪黄狢SS控制文本超出指定寬度顯示省略號和文本不換行效果的實(shí)現(xiàn)。小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個(gè)參考2016-05-05- 這篇文章主要介紹了CSS超出文本指定寬度用省略號代替和文本不換行的相關(guān)資料，小編覺的實(shí)用性非常，特此分享到腳本之家平臺，供大家參考2016-05-05
CSS自動換行、強(qiáng)制不換行、強(qiáng)制斷行、超出顯示省略號
這篇文章主要介紹了CSS自動換行、強(qiáng)制不換行、強(qiáng)制斷行、超出顯示省略號的相關(guān)資料,需要的朋友可以參考下2016-04-26CSS強(qiáng)制換行對齊的實(shí)現(xiàn)方法
這篇文章主要為大家介紹了CSS強(qiáng)制換行對齊的實(shí)現(xiàn)方法,涉及css中text-justify屬性的使用技巧,需要的朋友可以參考下2015-05-12- 這篇文章主要為大家介紹了CSS實(shí)現(xiàn)連續(xù)字符換行的方法,設(shè)計(jì)CSS的word-break屬性使用方法,需要的朋友可以參考下2015-05-12
CSS代碼使純英文數(shù)字自動換行的簡單實(shí)現(xiàn)
下面小編就為大家?guī)硪黄狢SS代碼使純英文數(shù)字自動換行的簡單實(shí)現(xiàn)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-10-18