标签让标签的内容原样输出</h1><div class="clear"></div><p class="post-meta"><span class="time"><i class="icon-time"></i>2022-07-24 18:54:19</span></p><div class="clear"></div></header><div class="entry" itemprop="articleBody"><div> <p>当通过<textarea>插数据进数据的库，取出来后都变成一行变成，用这个<pre>标签能原样输入插入时的格式。</p> <p>当时要对<pre>加一些CSS样式才行啦。</p> <p>以下为引用的内容：</p> <p><style><br> pre {<br> white-space: pre-wrap; /* css-3 */<br> white-space: -moz-pre-wrap; /* Mozilla, since 1999 */<br> white-space: -pre-wrap; /* Opera 4-6 */<br> white-space: -o-pre-wrap; /* Opera 7 */<br> word-wrap: break-word; /* Internet Explorer 5.5+ */<br> word-break:break-all;<br> overflow:hidden;<br> }<br> </style></p> <p>该CSS方案可让pre标签内的文本自动换行，我在我有的浏览器上都测试了一下，全部支持，IE6，IE7, IE8, Firefox, Opera, Safari和Chrome。</p> <p>仅当你把窗口缩小到小于20个字符的宽度的时候，才会超出边界</p> </div></div><footer class="entry-meta"><div class="clear"><div class="page-nav"></div></div><div class="gpost-below mobile-no"></div></footer><div class="post-navigation">上一篇：<a href="/manong/708271.html">maven项目配置findbugs插件 使用git钩子控制代码的提交</a><p><br>下一篇：<a href="/manong/708273.html">js在工作中遇到的一些问题</a></p></div></article></div><section id="related-posts" class="widget-box"><h3>相关文章</h3><div class="widget-content"><ul><li class="other-news"><span>07-24</span><a href="/manong/960899.html" title="[html] 如何让pre标签中的元素自动换行？"><i class="icon-angle-right"></i>[html] 如何让pre标签中的元素自动换行？</a></li><li class="other-news"><span>07-24</span><a href="/manong/275619.html" title="关于textarea标签输出数据库数据时出现大量空格导致格式不一致的问题"><i class="icon-angle-right"></i>关于textarea标签输出数据库数据时出现大量空格导致格式不一致的问题</a></li><li class="other-news"><span>07-24</span><a href="/manong/17782.html" title="css控制内容内img标签的图片在固定大小内，小于固定大小原样显示，大于的固定大小"><i class="icon-angle-right"></i>css控制内容内img标签的图片在固定大小内，小于固定大小原样显示，大于的固定大小</a></li><li class="other-news"><span>07-24</span><a href="/manong/1504326.html" title="js把预定义的html字符串转换为 HTML 实体 htmlspecialchars 输出html实体内容包括标签，而不自动转义标签，只显示内容，类似php的htmlspecialchars"><i class="icon-angle-right"></i>js把预定义的html字符串转换为 HTML 实体 htmlspecialchars 输出html实体内容包括标签，而不自动转义标签，只显示内容，类似php的htmlspecialchars</a></li><li class="other-news"><span>07-24</span><a href="/manong/1469167.html" title="输出在我的PHP中转义(html标签呈现原样)"><i class="icon-angle-right"></i>输出在我的PHP中转义(html标签呈现原样)</a></li><li class="other-news"><span>07-24</span><a href="/manong/1415912.html" title="夺命雷公狗---DEDECMS----22dedecms让A标签进入对应的内容页"><i class="icon-angle-right"></i>夺命雷公狗---DEDECMS----22dedecms让A标签进入对应的内容页</a></li><li class="other-news"><span>07-24</span><a href="/manong/1076012.html" title="textarea标签内容为（英文或数字不自动换行）的解决方法"><i class="icon-angle-right"></i>textarea标签内容为（英文或数字不自动换行）的解决方法</a></li><li class="other-news"><span>07-24</span><a href="/manong/708272.html" title="<pre>标签让<textarea>标签的内容原样输出"><i class="icon-angle-right"></i><pre>标签让<textarea>标签的内容原样输出</a></li><li class="other-news"><span>07-24</span><a href="/manong/81661.html" title="css pre如果同时运用了css的border-radius、 overflow两个属性且标签中内容太多时,外部div滚动条在firefox下滚动时很卡"><i class="icon-angle-right"></i>css pre如果同时运用了css的border-radius、 overflow两个属性且标签中内容太多时,外部div滚动条在firefox下滚动时很卡</a></li></ul><div class="clear"></div></div></section></div><aside class="span4 sidebar-right hide-sidebar"><div id="posts-list-widget-9" class="widget-box widget widget-posts"><div class="widget-title"><span class="icon"><i class="icon-list"></i></span><h3>编程语言最新文章</h3></div><div class="widget-content"><li ><div class="widget-thumb"><i class="icon-angle-right"></i><a href="/manong/584962.html" title="重磅首发 |《Elasticsearch 中国开发者调查报告》探索开发者的现状和未来">重磅首发 |《Elasticsearch 中国开发者调查报告》探索开发者的现状和未来</a></div></li><li ><div class="widget-thumb"><i class="icon-angle-right"></i><a href="/manong/262444.html" title="精通SpringBoot——第三篇：详解WebMvcConfigurer接口">精通SpringBoot——第三篇：详解WebMvcConfigurer接口</a></div></li><li ><div class="widget-thumb"><i class="icon-angle-right"></i><a href="/manong/38107.html" title="历代《Java开发手册》亮点全总结，超全资料带你和260万人一起学Java！">历代《Java开发手册》亮点全总结，超全资料带你和260万人一起学Java！</a></div></li><li ><div class="widget-thumb"><i class="icon-angle-right"></i><a href="/manong/379760.html" title="第四章：Spring项目文件上传两种方式（全解析）">第四章：Spring项目文件上传两种方式（全解析）</a></div></li><li ><div class="widget-thumb"><i class="icon-angle-right"></i><a href="/manong/339513.html" title="重磅首发 | 承载亿级流量的开发框架，闲鱼Flutter技术解析与实战大公开">重磅首发 | 承载亿级流量的开发框架，闲鱼Flutter技术解析与实战大公开</a></div></li><li ><div class="widget-thumb"><i class="icon-angle-right"></i><a href="/manong/320297.html" title="免费下载！玩转ECS从入门到精通（入门篇）">免费下载！玩转ECS从入门到精通（入门篇）</a></div></li><li ><div class="widget-thumb"><i class="icon-angle-right"></i><a href="/manong/340119.html" title="阿里CTO程立：双11催生全球最大规模数字创新工程">阿里CTO程立：双11催生全球最大规模数字创新工程</a></div></li><li ><div class="widget-thumb"><i class="icon-angle-right"></i><a href="/manong/527954.html" title="速度收藏！看完这份知识图谱，才算搞懂 Flink！">速度收藏！看完这份知识图谱，才算搞懂 Flink！</a></div></li><li ><div class="widget-thumb"><i class="icon-angle-right"></i><a href="/manong/278652.html" title="如何打造千万级Feed流系统">如何打造千万级Feed流系统</a></div></li><div class="clear"></div></div></div></aside></div></div></div><footer id="footer" class="row-fluid" role="contentinfo" itemscope=""><div class="span12 footer-nav"><ul><li><a href="/zuixin/">更多编程技术文章</a></li><li><a href="/sitemap.xml">网站地图</a></li></ul></div><div class="span12 footer-info"><p>本站所有资源皆搜集自网络，相关版权归版权持有人所有，如有侵权，请电邮告之，本站会尽快删除。<span class="email-span"></span></p><p><a href="https://beian.miit.gov.cn/#/Integrated/index" target="_blank">粤ICP备2022053706号</a></p></div></footer><div class="returnTop" title="" style="display: none;"><span class="s"></span><span class="b"></span>" </div><script type="text/javascript" src="/statics/553668/js/all.js"></script></body></html>