contenteditable 属性

定义和用法

contenteditable 属性规定是否可编辑元素的内容。

语法

<element contenteditable="value">

属性值

值	描述
true	规定可以编辑元素内容。
false	规定无法编辑元素内容。
classname	继承父元素的 contenteditable 属性。

 

 

 

 

 支持IE系列和最新浏览器

 

实例：

/**宽度固定，自动换行，内容超出滚动条显示***/
.divOne {
    width: 300px;
    height: 200px;
    border: 1px solid rgb(0,0,0);
    margin: 20px;
    overflow: hidden;
    overflow-y: auto;
    word-break: break-all;
    word-wrap: break-word;
    line-height: 20px;
    background: none;
}

    .divOne p {
        margin: 0px;
        padding: 0px;
    }

    .divOne:focus {
        border: 1px solid red;
        box-shadow: 0px 0px 30px rgba(0,255,0,0.5);
    }

/*宽度固定，高度自适应*/
.divTwo {
    width: 300px;
    height: auto;
    border: 1px solid blue;
    margin: 20px;
    overflow: hidden;
    word-break: break-all;
    word-wrap: break-word;
    line-height: 20px;
    background: none;
}

    <div class="divOne" contenteditable="true">
    </div>

    <div class="divTwo" contenteditable="true">
        <input type="button" value="按钮" />
    </div>

显示结果：