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;
}
效果