很多人看到标题后就认为只能用js来实现！ 今天我们介绍一个标签属性，它可以使块元素可编辑并高度适应内容。

=“真/假”

定义：

顾名思义，它允许用户编辑元素的内容、包含任意文本以及包含子元素。

使用：

对于普通的块元素，添加 ==“true”：

我是一个div

影响：

更可怕的是：

可以使用js获取编辑后的内容：

使用div实现效果：

最小高度为200px，最大高度为400px，y轴超过滚动条，x轴超过隐藏值。

word-wrap：break-word 允许在一个单词内断开句子，这意味着它将尝试显示整行。 如果无法显示，则会在单词内部断行并转到下一行。

<style>
    .box{
        width: 200px;
        padding: 10px;
        outline: 0;
        min-height: 200px;
        max-height: 200px;
        overflow-y: auto;
        overflow-x: hidden;
        word-wrap: break-word;
        border: 1px solid #b1cc99;
    }
</style>
我是一个div

影响：

注意：

1.它不能随着内容的增加而适应，但它可以。

2. 支持焦点和模糊事件以及焦点伪类。

3.该属性还有其他属性值：

：-仅有的; 只能编辑纯文本内容。

:; 未知！ ！ ！

: 插入符号； 未知！ ！ ！

4、属性值true、false所有浏览器都支持，但-only等属性值IE浏览器不支持。

补充：

focus 伪类通常用于在聚焦时设置输入框的样式：

*** 当获得焦点时，输入框会向外发光。

<style>
    input:focus{
        background-color: #eeeeee;
        border: 1px solid #cc7356;
        outline: none;
        box-shadow: 1px 1px 3px #cc7356;
    }
</style>