html5 新元素contenteditable
实习做项目的时候遇见了一个input text 换行的问题。
大家可能都知道text是输入框,可当文字过多就会撑破页面。
这时候大家大多会推荐textarea来进行换行,可这一个方法是较为不便的 固定的宽高不是长久之计
就这时 我突然搜到了一个html5 的新元素contenteditable
用法如下:http://www.w3school.com.cn/html5/att_global_contenteditable.asp
contenteditable=true即可实现。
举一个我实用的例子
html:
<!-- contenteditable是html5新元素 属性规定是否可编辑元素的内容。 -->
<div contenteditable="true">公司:杭州一汇博学教育科技有限公司</div>
css:
[contenteditable=true] {
display: inline-block;
width: 100%;
vertical-align: middle;
min-height: (1em * line-height);/*1个input的高度*/
/*这里写一个输入框应该有的样式*/
}
这样一来无论宽如何变都能换行
文章引用:https://segmentfault.com/q/1010000002593020/a-1020000002593116