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