DIV CSS 佈局教程網

這篇文章主要介紹了用CSS實現textArea中的placeholder換行功能,依照傳統方法書寫的話會出現問題,文中給出了解決方法,需要的朋友可以參考下

textArea的placeholder不能換行。例如：

<textarea placeholder="第1行 \n 第2行 <br> 第3行 \A 第4行
第5行"></textarea>

這是不會起作用的，會原封不動地輸出。

官方不認為這是一個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表示的是一個簡單的提示（一個詞或者一個短語），根本不需要換行。如文本太長，那就用title。

但是實際應用中，我們有時需要換行。如何解決？很多時候我們用JavaScript來解決，其實CSS也可以實現。

由於placeholder屬性是可以用css操作的，所以我們可以用:after來把placeholder的內容寫到CSS中，曲線救國。

CSS Code復制內容到剪貼板

1. textarea::-webkit-input-placeholder:after{
2. display:block;
3. content:"line@ \A line#";/* \A 表示換行 */
4. color:red;
5. };

以上是webkit的代碼，Firefox類也有相應的版本：

CSS Code復制內容到剪貼板

1. textarea::-moz-placeholder:after{
2. content:"line@ \A line#";/* \A 表示換行 */
3. color:red;
4. };