HTML、CSS : Display HTML code with `<![CDATA[` , `<pre>` 或 `code` ？</h2>
<div class="margin-bottom margin-bottom-color">
<span>
<span class="art-margin click-event-list">
<span class="tag-style-yellow">转载</span>
</span>
</span>
<span class="p-tips">
<span class="tips-margin-tip">作者：太空狗</span>
<span class="tips-margin-tip">更新时间：2023-10-29 14:45:01</span>
<span class="tips-margin-tip"><img src="/css/fonts/eye.svg" /><span id="article-look-1">24</span></span>
<span class="tips-margin-tip"><img src="/css/fonts/heart.svg" />4</span>
</span>
</div>
<div class="margin-bottom margin-bottom-color">
<div class="site-ad">
<div class="site-ad-top"><img alt="gpt4 key购买" src="/images/ad/gptkey.png" onclick="gotoUrl('https://referer.shadowai.xyz/r/30168')">
<img alt="nike" src="/images/ad/nike.jpg" onclick="gotoUrl('https://union-click.jd.com/jdc?e=618%7Cpc%7C&p=JF8BANQJK1olXDYCVV9cCUoXC2wOKx9KBVhdZAcYTQpVCHEWRwtIABlZAUEPVhcJWzBdTxIJXQcDVV9cCEMUBXBRXgdIbUd9PxVdCC9cYQ1uTy5IPE1QCyEVTQ0bD18NG1oUWgQKV1deOEsWAm4IG1oXXAMyZF5cOB15A24JGloUXQ4BUm5fCUoSA2sAGFoQbQYEVFxcC0sXAGYOE1olWgYLZIb3jpOjhbixnY-A-t-M9YrmkZO4uV84K1glWgYLQFgvSRkDBR04K1glXjYyVl9cDEInM184Kw')">
</div>
</div>
</div>
<div class="margin-bottom padding-p">
<div class="container-article">
<p><div id="question">
<p></p>
<p>在<强>中<code><xmp></code> , <code><pre></code>或 <code><code></code> , <code><xmp></code>已被推荐[1]显示 HTML 代码。</p>
<p><strong>给定的 html 例如:</strong></p>
<pre><code><xmp><br /><div data-role="page" data-theme="b"><br /> <header></header><br /> <div data-role="content"><br /> <ul data-role="listview" data-filter="true"><br /> <li><a href="index.html">Some</a></li><br /> <li><a href="index.html">random</a></li><br /> <li><a href="index.html">content</a></li><br /> <li><a href="index.html">With a very long annoying line which naturally goes roge by going outside the main windows and requesting scrolling. So childish !</a></li><br /> </ul><br /> </div><br /> <footer></footer><br /></div><!-- page end--><br /><script> <br />someJS(parameter) { <br /> $('header').append('hello!');<br />}<br /></script><br /></xmp><br /></code></pre>
<p>参见 <a href="javascript:void()" rel="noreferrer noopener nofollow">working fiddle</a> </p>
<p>我的一行很长，因此需要大量的水平滚动。<strong>如何<code>word-break</code> (强制跳线)在 <code><xmp></code> ?</strong></p>
<p><strong>我希望在不解析或滚动的情况下显示代码(html、JS)</strong>。</p>
<hr />
<p>[1]:相关:<a href="javascript:void()" rel="noreferrer noopener nofollow">Is there a HTML/CSS way to display HTML tags without parsing?</a> (建议xmp没有换行的解决方法)</p>
<hr />
<p><strong>编辑</strong>解决方案<a href="javascript:void()" rel="noreferrer noopener nofollow">http://jsfiddle.net/hucY9/5/</a> </p>
<pre><code>xmp { white-space: pre-wrap }<br /></code></pre>
<p></p>
</div>
<div style="margin-top: 20px;">
<p> <strong><font size="5">最佳答案</font></strong> </p>
</div>
<div id="answer">
<p></p>
<p>就像 <code>pre</code> 一样，您可以设置 <code>xmp</code> 的样式，使其不是真正的预格式化，而是根据需要在空格或其他允许的换行点换行，通过设置 </p>
<pre><code>xmp {white-space: pre-wrap }<br /></code></pre>
<p>但是，这会换行，以便第二部分从最左边开始，而不是与第一部分具有相同(或更大)的缩进。这使代码看起来很乱。</p>
<p>另请注意，在浏览器中实现的换行可能会使文本作为 HTML 标记无效。例如，许多浏览器可以随意在连字符后换行，但是例如不能破坏像 <code>data-filter</code> 这样的 HTML 属性。当然，这只是用户看到的标记问题，但仍然如此。</p>
<p>要创建智能换行(如在许多文本编辑器和编程环境中一样)，您需要 JavaScript 或更复杂的设置，其中每一行都是其自身的一个元素，在 CSS 中使用左边距缩进，而不是空格。</p>
<p></p>
</div>
<div style="margin-top: 20px; margin-bottom: 40px;">
<p style="font-size: 20px;">关于HTML、CSS : Display HTML code with `<xmp>` , `<pre>` 或 `code` ？，我们在Stack Overflow上找到一个类似的问题： <a href="javascript:void()" rel="noreferrer noopener nofollow" style="color: red;"> https://stackoverflow.com/questions/16226463/ </a> </p>
</div></p>
</div>
</div>
<div class="margin-bottom padding-p padding-p-line" align="center">
<span class="tips-margin-tip"><img
src="/css/fonts/eye.svg" onload="look(727319,'look')"/><span id="article-look-2">24</span></span>
<span
class="tips-margin-tip tips-margin-tip-click" onclick="look(727319,'heart')"><img
src="/css/fonts/heart.svg" /><span class="heart-p">4</span></span>
<span
class="tips-margin-tip tips-margin-tip-click" onclick="look(727319,'heartbreak')"><img
src="/css/fonts/heartbreak.svg" /><span class="heartbreak-p">0</span></span>
</div>
</div>
<div class="content-p">
<div>
文章推荐： <a class="a-tag"
href="/article/18/727321/detail.html"
target="_blank">html - CSS:我想在一个容器中分别定位每个 child</a>
</div>
<div>
文章推荐： <a class="a-tag"
href="/article/18/727320/detail.html"
target="_blank">git - 在 Centos 上使用 Jenkins 配置 git</a>
</div>
<div>
文章推荐： <a class="a-tag"
href="/article/18/727318/detail.html"
target="_blank">android - onBindViewHolder 方法中的进度条问题</a>
</div>
<div>
文章推荐： <a class="a-tag"
href="/article/18/727317/detail.html"
target="_blank">html - CSS 显示 :block and position:fixed</a>
</div>
</div>
<div class="content-p">
<ul class="like-article">
<li>
<a class="a-tag"
href="/article/9/16793/detail.html"
target="_blank">xmp.exe是什么进程？xmp.exe突然崩溃了？xmp.exe程序文件介绍</a>
<p> 来历及作用
进程程序文件是由深圳市迅雷网络技术有限公司为其发布迅雷看看播放器定义的一个多媒体在线播放程序。如果用户在Windows任务管理器中看到xmp.exe程序在运行，这说明您的电脑里安装了此</p>
</li>
<li>
<a class="a-tag"
href="/article/9/14852/detail.html"
target="_blank">xmp.exe是什么？xmp.exe崩溃如何解决</a>
<p> 很多朋友在用迅雷看看观看电影视频的时候，都会出现下面这种情况，弹出一个虫子，然后抱歉的跟你说：xmp.exe崩溃了。那么xmp.exe崩溃如何解决？不用担心，今天小编将带领大家一起解决这一问题！
</p>
</li>
<li>
<a class="a-tag"
href="/article/22/3200021/detail.html"
target="_blank">html - XMP 标签将我的样式替换为另一个</a>
<p>我发现了 XMP 标签，它对于逐字复制所有内容非常有用，直到结束 xmp 标签。 'aaa' 生成的CSS: pre, xmp, plaintext, listing { display: blo</p>
</li>
<li>
<a class="a-tag"
href="/article/17/639635/detail.html"
target="_blank">html - <XMP> 标签的用途是什么？</a>
<p>有人记得 XMP 标签吗？ 它的用途是什么？为什么不推荐使用它？ 最佳答案 XMP和 PRE不同。 PRE内的内容标签格式如下: 内容以固定字体显示， 保留所有空格，并且 每个换行符开始一个新行。 如</p>
</li>
<li>
<a class="a-tag"
href="/article/52/8395143/detail.html"
target="_blank">com.adobe.xmp.XMPMeta类的使用及代码示例</a>
<p>本文整理了Java中com.adobe.xmp.XMPMeta类的一些代码示例，展示了XMPMeta类的具体用法。这些代码示例主要来源于Github/Stackoverflow/Maven等平台，是从</p>
</li>
<li>
<a class="a-tag"
href="/article/52/8392652/detail.html"
target="_blank">com.adobe.xmp.XMPException类的使用及代码示例</a>
<p>本文整理了Java中com.adobe.xmp.XMPException类的一些代码示例，展示了XMPException类的具体用法。这些代码示例主要来源于Github/Stackoverflow/M</p>
</li>
<li>
<a class="a-tag"
href="/article/23/6481892/detail.html"
target="_blank">pdf - PDF (XMP) 格式的每页信息规范</a>
<p>我从 N 个图像创建一个 PDF。使用此命令行即可简单直接: convert front1.png back1.png front2.png back2.png result.pdf 不幸的是，一些信</p>
</li>
<li>
<a class="a-tag"
href="/article/23/6418702/detail.html"
target="_blank">pdftk - 合并时保留 XMP 数据</a>
<p>我像这样拆分和合并一些 pdf 文件 pdftk A=content.pdf B=frontside.pdf cat B1 A5-2 output output.pdf 2>&1 结果很好，但不再有</p>
</li>
<li>
<a class="a-tag"
href="/article/23/4337090/detail.html"
target="_blank">java - 从图片中提取 xmp 元数据时出现内存不足异常</a>
<p>从 tif 文件中提取元数据时，我遇到了上述问题。它的大小超过 450 MB。我正在使用 http://commons.apache.org/sanselan/ 提取最新版本(0.97)中的库。当我执</p>
</li>
<li>
<a class="a-tag"
href="/article/23/3377906/detail.html"
target="_blank">html - 显示不带 XMP 标签的源代码</a>
<p>如何在不使用 XMP 元素的情况下在 HTML5 网站上显示包含标签的 HTML 标记？ 本站采用HTML5制作，并展示HTML、C++等教程 所以我需要展示很多编程语言的源代码。 最佳答案 最常用的</p>
</li>
<li>
<a class="a-tag"
href="/article/23/3264661/detail.html"
target="_blank">javascript - 如何在没有 xmp 标签的情况下工作</a>
<p>我最近了解到xmp标签的使用，它已被弃用，很多人说使用pre，或者用 等 ...但这些解决方案对我来说并不好。 实际上，我想将内容放入网页中，并且在我使用 JavaScript 将其复制到其他容器中之</p>
</li>
<li>
<a class="a-tag"
href="/article/23/3228582/detail.html"
target="_blank">html - 在容器内使用 XMP 在页面上显示代码</a>
<p>我需要在页面上显示一些代码而不对其进行解析 - 我可以使用 XMP 来执行此操作，但它似乎不在其所在容器的范围内？有没有办法让它适应 div 的宽度？ http://codepen.io/r3dg3c</p>
</li>
<li>
<a class="a-tag"
href="/article/22/2780374/detail.html"
target="_blank">HTML <xmp> 标签!删除新段落</a>
<p>hi how are you? 应该渲染 hi how are you? 不 hi How are you? 句子的选择并不重要。我需要这个用于我正在制作的 HTML 标签表以帮助我进行编码，我需要</p>
</li>
<li>
<a class="a-tag"
href="/article/22/2265323/detail.html"
target="_blank">python - XMP 图像标记和 Python</a>
<p>如果我要在 Python 中通过 XMP 标记一堆图像，最好的方法是什么？我使用过 Perl 的 Image::ExifTool 并且我非常习惯它的可靠性。我的意思是，这东西从未在数万张图片上变砖。 </p>
</li>
<li>
<a class="a-tag"
href="/article/18/741044/detail.html"
target="_blank">html - 使用脚本标签模拟 XMP 标签并允许复制内容</a>
<p>官方已弃用(但仍受主要浏览器支持)，因此为了使新应用程序合法，唯一的解决方法是替换 xmp标签(不解析 HTML 的标签)是按我发现的那样使用:... . 此解决方案一切正常，但 Firefox(仅)</p>
</li>
<li>
<a class="a-tag"
href="/article/52/8393305/detail.html"
target="_blank">org.apache.jempbox.xmp.XMPMetadata类的使用及代码示例</a>
<p>本文整理了Java中org.apache.jempbox.xmp.XMPMetadata类的一些代码示例，展示了XMPMetadata类的具体用法。这些代码示例主要来源于Github/Stackove</p>
</li>
<li>
<a class="a-tag"
href="/article/23/8020947/detail.html"
target="_blank">metadata - PNG 图像是否支持 XMP 元数据？</a>
<p>在过去的几个小时里，我一直试图了解 XMP 元数据如何处理 PNG 文件，但无法完全理解它。 如果我用 Photoshop 创建一个 PNG 图像，保存它并打开文件信息对话框(文件 > 文件信息或 C</p>
</li>
<li>
<a class="a-tag"
href="/article/23/6845774/detail.html"
target="_blank">metadata - 是否可以在 XMP Dublin 核心元数据中创建自定义命名空间标签？</a>
<p>我很好奇是否可以为 XMP Dublin Core metadata 创建自定义命名空间？ 例如，如果我想添加像 mytest 这样的标签 我可以编写 XMP 元数据标准标签，例如 descripti</p>
</li>
<li>
<a class="a-tag"
href="/article/23/6237576/detail.html"
target="_blank">pdf - 将 XMP 元数据嵌入 PDF</a>
<p>我需要将 XMP 元数据添加到 PDF 文件中，而我进行的谷歌搜索并没有太大帮助。我正在寻找类似于 PDFTK 的工具，我可以通过命令行或脚本运行它以将 XMP 元数据添加到 PDF 中。 如果有办法</p>
</li>
<li>
<a class="a-tag"
href="/article/23/6186192/detail.html"
target="_blank">go - 未拾取 PDF/A XMP 数据</a>
<p>我正在尝试为发票创建 PDF/A 文件。因此，我尝试使用 gofpdf 为我的文件设置 XMP header 。图书馆。设置 header 似乎工作正常，但我的任何验证器(如 exiftool 或验证</p>
</li>
</ul>
</div>
</div>
<div class="resource col-xs-3 col-sm-3 col-md-3 col-lg-3">
<div class="content-p content-p-comment">
<div class="phone-current phone-current-float">
<img alt="" src="/images/phone/manphone.jpeg">
</div>
<div class="phone-current-float phone-current-style">
太空狗
</div>
<div class="phone-current-summary">
<span><strong>个人简介</strong></span>
<p>
我是一名优秀的程序员,十分优秀！
</p>
</div>
</div>
<div class="content-p content-p-comment">
<article class="p-list">
<div class="art-margin"
style="border-bottom: 1px solid #f3f0f0; padding-bottom: 5px;">
<strong>作者热门文章</strong>
</div>
<ul class="recomment-list-user">
<li><a class="a-tag"
href="/article/18/625999/detail.html"
target="_blank">c - 在位数组中找到第一个零</a></li>
<li><a class="a-tag"
href="/article/18/625996/detail.html"
target="_blank">linux - Unix 显示有关匹配两种模式之一的文件的信息</a></li>
<li><a class="a-tag"
href="/article/18/625993/detail.html"
target="_blank">正则表达式替换多个文件</a></li>
<li><a class="a-tag"
href="/article/18/625990/detail.html"
target="_blank">linux - 隐藏来自 xtrace 的命令</a></li>
</ul>
</article>
</div>
<div class="content-p content-p-comment">
<article class="p-list">
<div class="art-margin"
style="border-bottom: 1px solid #f3f0f0; padding-bottom: 5px;">
<strong>滴滴打车优惠券免费领取</strong>
</div>
<img alt="滴滴打车优惠券" src="/images/ad/didiad.png" width="210px" onclick="window.open('/ad/didi', '_blank')">
</article>
</div>
<div class="content-p content-p-comment">
<article class="p-list">
<div class="art-margin"
style="border-bottom: 1px solid #f3f0f0; padding-bottom: 5px;">
<strong>全站热门文章</strong>
</div>
<ul class="recomment-list-user">
<li><a class="a-tag"
href="/article/92/8828613/detail.html"
target="_blank">深入解析子查询（SUBQUERY）：增强SQL查询灵活性的强大工具</a></li>
<li><a class="a-tag"
href="/article/92/8828612/detail.html"
target="_blank">IoC究竟是什么？——IoC的基础分析</a></li>
<li><a class="a-tag"
href="/article/92/8828611/detail.html"
target="_blank">Python库房管理系统开发指南</a></li>
<li><a class="a-tag"
href="/article/92/8828610/detail.html"
target="_blank">在shell脚本中为日志添加颜色</a></li>
<li><a class="a-tag"
href="/article/92/8828609/detail.html"
target="_blank">实现windows下简单的自动化窗口管理</a></li>
<li><a class="a-tag"
href="/article/92/8828608/detail.html"
target="_blank">Python·MuJoCo|MuJoCo与mujoco_py的版本对应，以及安装Cython<3</a></li>
<li><a class="a-tag"
href="/article/92/8828607/detail.html"
target="_blank">.NET中管理WebAPI文档的两种方式</a></li>
<li><a class="a-tag"
href="/article/92/8828606/detail.html"
target="_blank">线段树维护最大子段和及其类似问题</a></li>
<li><a class="a-tag"
href="/article/92/8828605/detail.html"
target="_blank">gitworktree同一个仓库多个分支并行开发和管理</a></li>
<li><a class="a-tag"
href="/article/92/8828604/detail.html"
target="_blank">中间件vs过滤器</a></li>
</ul>
</article>
</div>
</div>
</div>
</div>
<div class="foot-font" style="border-top: 1px solid #f3f0f0; margin: auto; padding: 15px; background-color: #474443" align="center">
<a href="https://beian.miit.gov.cn/#/Integrated/index" target="_blank"><span
class="color-txt-foot">Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号</span></a>
<br/>
<a href="/" target="_blank"><span
class="color-txt-foot">广告合作:1813099741@qq.com</span></a>
<a href="http://www.6ren.com" target="_blank"><span
class="color-txt-foot">6ren.com</span></a>
</div>
<script>
var _hmt = _hmt || [];
(function() {
var hm = document.createElement("script");
hm.src = "https://hm.baidu.com/hm.js?d1cb9c185f1642d6f07e22cafa330c45";
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(hm, s);
})();
</script>
<script>
var _hmt = _hmt || [];
(function() {
var hm = document.createElement("script");
hm.src = "https://hm.baidu.com/hm.js?d46c26b2162aface49b8acf6cb7025e1";
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(hm, s);
})();
</script>
</body>
</html>]]>
个人中心
文章发布
退出