`

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>标签不生效,则可以使用 .replace(/\\n/g, "<BR>") 来进行替换 显示


分享到:
评论
发表评论

文章已被作者锁定,不允许评论。

相关推荐

    空格回车制表符处理,HTML代码简单处理

    总结来说,处理HTML代码中的空格、回车和制表符涉及了HTML解析规则、字符串操作、CSS样式控制、JavaScript编程和服务器端处理等多个方面。了解这些知识点对于编写整洁、有效的网页代码至关重要。而`strFormat.h`这样...

    ajax 返回值自动添加pre标签的解决方法

    `&lt;pre&gt;`标签在HTML中用于定义预格式化的文本,它会保留其中的所有空格和换行,并以等宽字体显示。当浏览器接收到的数据被认为是纯文本或未知类型时,它可能会自动将其放入`&lt;pre&gt;`标签中以保持原始格式。在描述的问题...

    网页中换行符的处理

    网页中换行符的处理是指在 HTML 中对换行符的处理,包括 HTML 标签的使用、WORD 文档的处理、自动换行的概念、白空格的处理等。 首先,HTML 中的换行符可以使用 ` ` 标签来表示换行,但是在 HTML5 中,` ` ...

    Web程序开发:第2章 HTML概述.ppt

    在HTML文档中,绝大多数元素都有起始标签和结束标签,在起始标签和结束标签之间包含的是元素主体。 HTML元素可以相互嵌套,形成文档结构。嵌套必须匹配,不能交错嵌套。例如:&lt;div&gt;&lt;span&gt;这是一个span&lt;/span&gt;&lt;/div...

    HTML+CSS基础知识点.pdf

    9. 使用 ` ` 标签可以分行显示文本, ` ` 标签作用相当于 word 文档中的回车。 10. 空格可以使用 `&nbsp;` 语法来输入。 11. `&lt;hr&gt;` 标签可以添加水平横线。 12. `&lt;address&gt;` 标签可以为网页加入地址信息...

    Web基础题(html+css).pdf

    第九题中,`&lt;pre&gt;` 标签用于保留预定义的格式,如空格和换行。 8. 无序列表和有序列表:第十题涉及创建列表,无序列表使用 `&lt;ul&gt;` 和 `&lt;li&gt;` 标签,而有序列表使用 `&lt;ol&gt;` 和 `&lt;li&gt;` 标签,`type` 属性可以定义有序...

    网页设计考试题-PHP.docx

    10. **预设格式标签**:`&lt;pre&gt;`标签用于保留预设的格式,如空格和换行。 11. **表格标签**:`&lt;table&gt;`用于声明HTML表格。 12. **框架标签**:`&lt;frameset&gt;`和`&lt;frame&gt;`用于创建HTML框架。 13. **标题标签**:`&lt;h1&gt;...

    网页设计考试试题(卷)库.doc

    - 回车符在文本中可能是/r,在HTML中无直接转义符号,但可以通过换行符和空格组合模拟。 6. 框架和不支持框架的情况: - 标签用于在浏览器不支持框架时显示替代内容。 以上内容涵盖了网页设计考试中的关键知识点...

    第五讲-HTML网页设计基础三.ppt

    此外,` `标签在浏览器中产生回车换行效果,而连续的空格可以使用`&nbsp;`表示。`&lt;hr&gt;`标签创建水平线,`,size=,color=,align=…&gt;`定义了宽度、高度、颜色和对齐方式。例如: ```html ``` 本讲总结了HTML的...

    网 设计与制作 练习 .pdf

    3. `&lt;pre&gt;`标记:它用于预排版文本,保留空格和换行,使得文本按照编写时的形式展示。 4. 表格相关标签:`&lt;table&gt;`定义表格,`&lt;tr&gt;`定义行,`&lt;td&gt;`定义单元格。`&lt;T&gt;`不是标准的HTML标签。 5. `valign`属性:在`...

    html5组织内容_动力节点Java学院整理

    使用`&lt;pre&gt;`元素可以保留文本的原始格式,不会被浏览器压缩空格和回车。这在展示代码示例时特别有用,常常与`&lt;code&gt;`元素一起使用: ```html &lt;p&gt;Add this to your style sheet if you want to display a dotted ...

    完整版模块_文本折行.rar

    在Web开发中,HTML元素的` `标签用于强制换行,而CSS的`white-space`属性可以控制如何处理元素内的空白字符,如`normal`(默认,单词间空格压缩,连续空格合并,换行折叠)、`pre`(保留空白,换行不折叠)和`...

    网页设计考试题PHP.docx

    7. 在Dreamweaver设计视图中,加入 标签的快捷键是Shift+Enter,每次回车会在后台生成标签,而在代码视图中,空格表示为&nbps;,换行符在HTML中用 表示,回车符在某些编程语境下用/r表示,而/n代表新行,/t...

    网设计与制作练习 .docx

    3. `&lt;pre&gt;`标记:此标记用于预排版文本,保留空格和换行,常用于显示代码片段。 4. 表格相关标签:`&lt;table&gt;`、`&lt;tr&gt;`和`&lt;td&gt;`分别代表表格、行和单元格,而`&lt;T&gt;`不在HTML标准中。 5. `valign`属性:在`&lt;th&gt;`和`...

    Keyboard Shortcuts-Adobe pre快捷键文件夹

    安装了Adobe premiere CS4大师版,但是没有快捷键应用,比如按空格键和回车键都不能实现作品的预览,很不方便。原来在安装目录里少了这个文件夹Keyboard Shortcuts-Adobe pre快捷键

Global site tag (gtag.js) - Google Analytics