CSS 实现 textArea 的 placeholder 换行

charles_paul 发布于2019-08-28 17:52 / 1426人阅读

摘要：官方不认为这是一个意思就是说表示的是一个简单的提示一个词或者一个短语，根本不需要换行。但是实际应用中，我们有时需要换行。如何解决很多时候我们用来解决，其实也可以实现。表示换行以上是的代码，类也有相应的版本表示换行可以参考上的讨论。

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

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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