CSS 實現 textArea 的 placeholder 換行

charles_paul 發布于2019-08-28 17:52 / 1494人閱讀

摘要：官方不認為這是一個意思就是說表示的是一個簡單的提示一個詞或者一個短語，根本不需要換行。但是實際應用中，我們有時需要換行。如何解決很多時候我們用來解決，其實也可以實現。表示換行以上是的代碼，類也有相應的版本表示換行可以參考上的討論。

textArea的placeholder不能換行。例如：

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

官方不認為這是一個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中，曲線救國。

textarea::-webkit-input-placeholder:after{
  display:block;
  content:"line@ A line#";/*  A 表示換行  */
  color:red;
};

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

textarea::-moz-placeholder:after{
  content:"line@ A line#";/*  A 表示換行  */
  color:red;
};

可以參考stackoverflow上的討論。

云服務器 GPU云服務器 textarea換行問題換行css css換行 JS輕松實現CSS設置

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/110855.html

css 填坑常用代碼分享

以下是常用的代碼收集，沒有任何技術含量，只是填坑的積累。一. css 2.x code 1. 文字換行 /*強制不換行*/ white-space:nowrap; /*自動換行*/ word-wrap: break-word; word-break: normal; /*強制英文單詞斷行*/ word-break:break-all; 2. 兩端對齊 text-align:justi...

wums 2019-08-28 18:05 評論0 收藏0
CSS常用代碼

摘要：文字換行強制不換行自動換行強制英文單詞斷行兩端對齊去掉瀏覽器中文本框或的黃色焦點框去掉記住密碼后自動填充表單的黃色背景最小高度兼容代碼鼠標不允許點擊平臺字體優化微軟雅黑文字過多后顯示省略號 1. css 2.x 文字換行 /*強制不換行*/ white-space:nowrap; /*自動換行*/ word-wrap: break-word; word-break: normal; /...

Eirunye 2019-08-19 17:09 評論0 收藏0
CSS常用代碼

摘要：文字換行強制不換行自動換行強制英文單詞斷行兩端對齊去掉瀏覽器中文本框或的黃色焦點框去掉記住密碼后自動填充表單的黃色背景最小高度兼容代碼鼠標不允許點擊平臺字體優化微軟雅黑文字過多后顯示省略號 1. css 2.x 文字換行 /*強制不換行*/ white-space:nowrap; /*自動換行*/ word-wrap: break-word; word-break: normal; /...

ddongjian0000 2019-08-28 18:25 評論0 收藏0
CSS常用代碼

摘要：文字換行強制不換行自動換行強制英文單詞斷行兩端對齊去掉瀏覽器中文本框或的黃色焦點框去掉記住密碼后自動填充表單的黃色背景最小高度兼容代碼鼠標不允許點擊平臺字體優化微軟雅黑文字過多后顯示省略號 1. css 2.x 文字換行 /*強制不換行*/ white-space:nowrap; /*自動換行*/ word-wrap: break-word; word-break: normal; /...

Java_oldboy 2019-08-01 14:56 評論0 收藏0