APP中嵌入webview时 碰到的文字对齐需求 ----主测 chrome firefox safari

第一感觉就是直接在placeholder属性中写入 \n <br> 之类的 ，然而并没什么用

网上查了下 各种说辞不一， 归纳总结如下：

有效方法列表：

· 类似\n的解决方式 如：

[1]placeholder="Line 1 &#13;&#10; Line 2"

[2] placeholder="Line 1

Line2" ----这个是随便测试的，因为会打乱代码格式 个人并不推荐

---- chrome 浏览器中测试有效 safari firefox 无效


·使用 css ::before 或 ::after 样式实现

<textareaid="textline"placeholder="..."rows="5"></textarea><style>#textline::-webkit-input-placeholder::before{display:block;color:#666;content:"line1\Aline2\Aline3\A";}</style>

---- safari 浏览器中测试有效 chrome firefox无效


同理 使用 -moz-placeholder before after 尝试解决 firefox 浏览器兼容问题

搜索参考了网上的一段css样式 内容如下：

/*all*/::-webkit-input-placeholder{color:#f00;}::-moz-placeholder{color:#f00;}/*firefox19+*/:-ms-input-placeholder{color:#f00;}/*ie*/input:-moz-placeholder{color:#f00;}/*individual:webkit*/#field2::-webkit-input-placeholder{color:#00f;}#field3::-webkit-input-placeholder{color:#090;background:lightgreen;text-transform:uppercase;}#field4::-webkit-input-placeholder{font-style:italic;text-decoration:overline;letter-spacing:3px;color:#999;}/*individual:mozilla*/#field2::-moz-placeholder{color:#00f;}#field3::-moz-placeholder{color:#090;background:lightgreen;text-transform:uppercase;}#field4::-moz-placeholder{font-style:italic;text-decoration:overline;letter-spacing:3px;color:#999;}

然而实际测试发现并没有什么用 -------


不过 到这边 已经解决了 android 及 iOS 嵌入的webview中 placeholder 提示换行问题

就不过度纠结了


其他搜集方法列表：

· 使用js 在定义的字符串中 如： var ph = "line \n another line \n third line";

然后再赋值到placeholder 属性上

·结合div css 实现样式覆盖

实现起来感觉比较麻烦 还是算了吧


如果你也碰到了这个问题 看到这个 ，并且方便的解决了 firefox 的兼容问题，欢迎留言交流 :)