APP中嵌入webview时 碰到的文字对齐需求 ----主测 chrome firefox safari
第一感觉就是直接在placeholder属性中写入 \n <br> 之类的 ，然而并没什么用
网上查了下 各种说辞不一， 归纳总结如下：
有效方法列表：
· 类似\n的解决方式 如：
[1] placeholder="Line 1 Line 2"
[2] placeholder="Line 1
Line2" ----这个是随便测试的，因为会打乱代码格式 个人并不推荐
---- chrome 浏览器中测试有效 safari firefox 无效
·使用 css ::before 或 ::after 样式实现
计算
安全
数据库
网络和加速
企业服务
<textarea id="textline" placeholder="..." rows="5"></textarea>
<style>
#textline::-webkit-input-placeholder::before {
display:block;
color:#666;
content: "line1 \A line2 \A line3 \A";
}
</style>---- safari 浏览器中测试有效 chrome firefox无效
同理 使用 -moz-placeholder before after 尝试解决 firefox 浏览器兼容问题
搜索参考了网上的一段css样式 内容如下：
/* all */
::-webkit-input-placeholder { color:#f00; }
::-moz-placeholder { color:#f00; } /* firefox 19+ */
:-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 的兼容问题，欢迎留言交流 :)
亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
