关于html中的<pre>标签

pre 元素可定义预格式化的文本。被包围在 pre 元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体。

<pre> 标签的一个常见应用就是用来表示计算机的源代码。

做网页即时聊天时的文字输入框采用<pre>标签。

<div class="chat_online">
    <!--输入框-->
    <pre class="pre_message" contenteditable="true"  contenteditable-directive=""></pre>
    <!--输入框结束-->
</div>

其中<pre></pre>需要写在一起，如果中间留有空格或者换行等，会导致输入框的光标不在开始位置。 

contenteditable="true"可以设置<pre></pre>标签可编辑。 

<pre></pre>的样式：

.pre_message{
    width: 100%;
    height: 100%;
    height: 6em;
    overflow-y: auto;
    overflow-x: hidden;
    padding-left: 20px;
    outline: none;
    border: 0;
    font-size: 14px;
    white-space: pre-wrap;
    word-break: normal;
    background-color: #e0e0e0;

}

效果