解决HTML中换行符渲染成空白符问题

作者: xinhui9056 | 来源:发表于2019-07-13 17:41 被阅读0次

解决HTML中换行符渲染成空白符问题
2020-06-21
React 正常渲染后端返回的HTML代码
处理空白符总结
替换文本换行符和空白符为HTML格式显示
消除inline-block产生的元素间空隙
不熟悉的属性------ white-space
标签内换行</a></li><li><a href="#r9">css white-space属性</a></li><li><a href="#r10">white-space</a></li></ol></div><pre><code>//html <nav class="navbar"> <ul> <li><a href="/home">Home</a></li> <li><a href="/spaceships">Spaceships</a></li> <li><a href="/planets">Planets</a></li> <li><a href="/stars">Stars</a></li> </ul> </nav> </code></pre> <pre><code>//css nav { display: block; } .navbar ul { font-family: 'Avenir Next', Avenir, Corbel, sans-serif; list-style: none; padding: 0; background-color: #486a8e; } .navbar li { text-transform: uppercase; display: inline-block; text-align: center; width: 25%; -moz-box-sizing: border-box; box-sizing: border-box; background-color: #12459e; outline: 1px solid #fff; } .navbar li a { display: block; text-decoration: none; line-height: 1.75em; padding: 1em; color: #fff; } </code></pre> 上述代码显示效果如下： <img src="https://img.haomeiwen.com/i8830437/3007e130b3d59709.png"> <p>HTML源代码中的换行符被渲染成了空白符，再加上每一项25%的宽度，就导致了折行。要消灭这些空白符，可以尝试把所有<li>标签都排一行，但这种要求显示不友好。</p> <p><strong>解决方案一：把包含元素的font-size设置为0（从而让每个空格的宽度为0），然后在每一项上重新设置大小：</strong></p> <pre><code>.navbar ul{ font-size: 0; } .navbar li{ font-size: 1rem; } </code></pre> <img src="https://img.haomeiwen.com/i8830437/c225541a42607ad3.png"> 最终效果 <p><strong>解决方案二：使用表格显示属性实现布局：</strong></p> <pre><code>.navbar ul{ display: table; width: 100%; table-layout: fixed; } .navbar li{ display: table-cell; } </code></pre> </div><div class="relateds"><h2>相关文章</h2><ul><li id="r1"><a href="/user/hwjrittx.html"><img src="https://img.haomeiwen.com/ud/13-394c31a9cb492fcb39c27422ca7d2815.jpg" width="80"></a><h3><a href="/subject/cdumkctx.html">解决HTML中换行符渲染成空白符问题</a></h3><p>HTML源代码中的换行符被渲染成了空白符，再加上每一项25%的宽度，就导致了折行。要消灭这些空白符，可以尝试把所有...</p></li><li id="r2"><a href="/user/wsnvvxtx.html"><img src="https://img.haomeiwen.com/us19963938/964870c5-db49-4160-95f9-34da1662e7ef.jpg" width="80"></a><h3><a href="/subject/lvboxktx.html">2020-06-21</a></h3><p>1、解决React项目后台接口返回HTML 文本时无法解析渲染成正常的html问题： 2、解决微信小程序中的滚动穿...</p></li><li id="r3"><a href="/user/wsnvvxtx.html"><img src="https://img.haomeiwen.com/us19963938/964870c5-db49-4160-95f9-34da1662e7ef.jpg" width="80"></a><h3><a href="/subject/ohuzvctx.html">React 正常渲染后端返回的HTML代码</a></h3><p>1、解决React项目后台接口返回HTML 文本时无法解析渲染成正常的html问题： ``` ``` 2、解决微信...</p></li><li id="r4"><a href="/user/pcjsjttx.html"><img src="https://img.haomeiwen.com/us4769975/a14a1691-3810-4f1f-8738-ddb46f0e5676.jpg" width="80"></a><h3><a href="/subject/ejnpxxtx.html">处理空白符总结</a></h3><p>控制文本之间的空白符和换行符是通过设置white-space属性来控制的： normal合并空白符，并且将元素中的...</p></li><li id="r5"><a href="/user/mqyokttx.html"><img src="https://img.haomeiwen.com/us3154986/59e445ae-fd55-4ef3-98a1-222d8ebffcde.jpg" width="80"></a><h3><a href="/subject/uawxbxtx.html">替换文本换行符和空白符为HTML格式显示</a></h3><p>场景后台返回的文本换行符和空白符，无法在前端直接展示出来。需要替换为和，并以HTML格式展示</p></li><li id="r6"><a href="/user/plmfcttx.html"><img src="https://img.haomeiwen.com/us1874069/11a17fb922cc" width="80"></a><h3><a href="/subject/yvizwttx.html">消除inline-block产生的元素间空隙</a></h3><p>虽然四个块状子元素排在了一行，但是子元素之间却留有空隙！产生的原因： HTML中的换行符、空格符、制表符等空白符...</p></li><li id="r7"><a href="/user/ujtnwttx.html"><img src="https://img.haomeiwen.com/us9526466/d296ff00-da61-4a9f-8f5b-dbba294811d3.jpg" width="80"></a><h3><a href="/subject/gamahctx.html">不熟悉的属性------ white-space</a></h3><p>pre：保留换行和空白符，遇到换行； pre-wrap：保留空白符和换行符，正常换行； pre-line：保留换...</p></li><li id="r8"><a href="/user/dxpkkttx.html"><img src="https://img.haomeiwen.com/us2857487/643cb249ce5b.jpg" width="80"></a><h3><a href="/subject/vewujqtx.html"><TextArea>标签内换行</a></h3><p>利用HTML中的换行符</p></li><li id="r9"><a href="/user/dauzattx.html"><img src="https://img.haomeiwen.com/us11416921/23a54cfd-13ac-4e5c-8535-317ac099f0ea.jpg" width="80"></a><h3><a href="/subject/svudeltx.html">css white-space属性</a></h3><p>whiteSpace 属性设置如何处理文本中的空白符（比如空格和换行符）。normal 默认。空白会被浏览器忽略...</p></li><li id="r10"><a href="/user/kklnsttx.html"><img src="https://img.haomeiwen.com/us5418302/9ce4ef17-8386-49be-8d6f-e653b4dbfe2d.jpg" width="80"></a><h3><a href="/subject/blmtaltx.html">white-space</a></h3><p>在css中white-space属性用来控制容器的文本中带有空白符、制表符、换行符等的显示，取值有：</p></li></ul></div></div><div id="comments"><h2>网友评论</h2><ul></ul></div><ul></ul><div class="article_by"><div class="bytitle"><p>本文标题：<font color="#666">解决HTML中换行符渲染成空白符问题</font></p><p>本文链接：<font color="#666">https://www.haomeiwen.com/subject/cdumkctx.html</font></p></div></div></div><div class="meiwen-left fl mb"><div class="title ht"><h3>延伸阅读</h3><div class="share fr" id="bdshare"></div><i class="lt"></i><i class="rt"></i></div><div class="related"><ul class="related-list"><li><a class="meiwen" href="/mw/lbyctttx.html">那年盛夏诗歌</a></li><li><a class="meiwen" href="/sy/kbyctttx.html">环境监察队工作总结范文</a></li><li><a class="meiwen" href="/sy/hbyctttx.html">优秀教师学习心得范文</a></li><li><a class="meiwen" href="/sy/cbyctttx.html">华胥引的读后感300字</a></li><li><a class="meiwen" href="/yw/qbyctttx.html">《Its red》教学反思范文</a></li><li><a class="meiwen" href="/sy/fbyctttx.html">农资购销的合同范本</a></li><li><a class="meiwen" href="/sy/xbyctttx.html">竞选中队委优秀演讲稿</a></li><li><a class="meiwen" href="/yw/tbyctttx.html">辞金蹈海的成语解释</a></li><li><a class="meiwen" href="/ja/zvyctttx.html">《世纪宝鼎》公开课教案设计</a></li></ul></div><div class="picture" ><ul class="picture-list"><li><a class="meiwen" href="/article/69641.html"><img class="lazy" data-original="/uploads/allimg/1611/1-1611292156350-L.jpg" width="150" height="120" alt="因为爱你，所以牵挂"/><span>因为爱你，所以牵挂</span></a></li><li><a class="meiwen" href="/article/84632.html"><img class="lazy" data-original="/uploads/userup/2800/14V4C648-O08.jpg" width="150" height="120" alt="今生今世红尘醉——美到心碎的古诗词"/><span>今生今世红尘醉——美到</span></a></li><li><a class="meiwen" href="/article/53482.html"><img class="lazy" data-original="/uploads/allimg/1609/1-160ZPU1030-L.jpg" width="150" height="120" alt="一个90后的内心独白"/><span>一个90后的内心独白</span></a></li><li><a class="meiwen" href="/article/3639.html"><img class="lazy" data-original="/uploads/userup/1159/1432YGR-9294.jpg" width="150" height="120" alt="致已逝去的高中年华"/><span>致已逝去的高中年华</span></a></li></ul></div></div><div class="meiwen-left fl mb"><div id="pinglun"><div id="SOHUCS"></div></div></div><div class="meiwen-left fl"><div class="title ht"><h3>深度阅读</h3><ul class="list"><li><font color="#A2B088">您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！</font></li></ul><i class="lt"></i><i class="rt"></i></div><ul class="tags"><li><a class="meiwen" href="/huati/qingrenjie/">情人节</a></li><li><a class="meiwen" href="/huati/muqinjie/">母亲节</a></li><li><a class="meiwen" href="/huati/chongyangjie/">重阳节</a></li><li><a class="meiwen" href="/huati/qingmingjie/">清明节</a></li><li><a class="meiwen" href="/huati/duanwujie/">端午节</a></li><li><a class="meiwen" href="/huati/zhishujie/">植树节</a></li><li><a class="meiwen" href="/huati/yuanxiaojie/">元宵节</a></li><li><a class="meiwen" href="/huati/funvjie/">妇女节</a></li><li><a class="meiwen" href="/huati/yurenjie/">愚人节</a></li><li><a class="meiwen" href="/huati/shengdanjie/">圣诞节</a></li><li><a class="meiwen" href="/huati/fuqinjie/">父亲节</a></li><li><a class="meiwen" href="/huati/jiaoshijie/">教师节</a></li><li><a class="meiwen" href="/huati/ertongjie/">儿童节</a></li><li><a class="meiwen" href="/huati/laodongjie/">劳动节</a></li><li><a class="meiwen" href="/huati/qingnianjie/">青年节</a></li><li><a class="meiwen" href="/huati/jianjunjie/">建军节</a></li><li><a class="meiwen" href="/huati/wanshengjie/">万圣节</a></li><li><a class="meiwen" href="/huati/pinganye/">平安夜</a></li><li><a class="meiwen" href="/huati/guanggunjie/">光棍节</a></li><li><a class="meiwen" href="/huati/zhongqiujie/">中秋节</a></li><li><a class="meiwen" href="/huati/guoqingjie/">国庆节</a></li><li><a class="meiwen" href="/huati/ganenjie/">感恩节</a></li><li><a class="meiwen" href="/huati/labajie/">腊八节</a></li><li><a class="meiwen" href="/huati/">更多话题</a></li></ul></div><div class="cl"></div></div><div class="article-right"><div class="meiwen-right fr mb"><dt class="title hd"><h3>栏目导航</h3><i class="lt"></i><i class="rt"></i></dt><ul class="list-nav"><a class="meiwen" href="/c/hqtttttx.html">摄影</a><a class="meiwen" href="/c/vqtttttx.html">故事</a><a class="meiwen" href="/c/uttttttx.html">互联网</a><a class="meiwen" href="/c/cttttttx.html">读书</a><a class="meiwen" href="/c/yttttttx.html">旅行</a></ul></div></div><div class="meiwen-right fr mb"><div class="title hd"><h3>热点阅读</h3><i class="lt"></i><i class="rt"></i></div><ul class="right-list"><li><a class="meiwen" href="/subject/jlumkctx.html">炎炎夏日，记得使用讲解器，对大喇叭说不</a></li><li><a class="meiwen" href="/subject/clumkctx.html">茶</a></li><li><a class="meiwen" href="/subject/qlumkctx.html">药店转型之健康管理师篇</a></li><li><a class="meiwen" href="/subject/gkumkctx.html">租房焦虑</a></li><li><a class="meiwen" href="/subject/ikumkctx.html">2019-07-13</a></li><li><a class="meiwen" href="/subject/bkumkctx.html">吴军给女儿的三条投资建议</a></li><li><a class="meiwen" href="/subject/mkumkctx.html">优雅写法-不断更新</a></li><li><a class="meiwen" href="/subject/pkumkctx.html">钱是为更好的选择生活，生活的有意义!</a></li><li><a class="meiwen" href="/subject/ukumkctx.html">费曼笔记法-专业知识一通百通【来自核聚老师考霸训练营】</a></li><li><a class="meiwen" href="/subject/ykumkctx.html">极客海兵：赚钱，你只需要这3步！</a></li></ul></div></div></div></div><div class="footer"><p class="p_1"><a href="/about/aboutus.html">关于我们</a>|<a href="/about/service.html">服务条款</a>|<a href="/about/contact.html">联系我们</a>|<a href="/subject/cdumkctx.html">解决HTML中换行符渲染成空白符问题</a>|<a href="/about/tougao.html">投稿指南</a>|<a href="/sitemap.html">网站地图</a>|<a href="/rssmap.html">RSS订阅</a>|<a href="/about/paiban.html">排版工具</a>|<a href="javascript:vod(0);" onclick="Mobileurl()">手机版</a></p><p class="p_2">提供<a href="/meiwen/zhaichao/">经典美文摘抄</a>,<a href="/sanwen/">优美散文欣赏</a>,<a href="/shige/xiandai/">现代诗歌精选</a>,<a href="/xiaoshuo/">短篇小说</a>,<a href="/diary/suibi/">心情随笔</a>,<a href="/qingshu/">表白情书</a><a href="/fanwen/">范文</a>,<a href="/gushi/">故事会在线阅读</a>欣赏</p><p class="p_2">Copyright © 2014-2023 <a href="/">Haomeiwen.com</a> All Rights Reserved. <a href="/">好美文阅读网</a> 版权所有</p><p class="p_2">备案信息：<i></i>桂公网安备 45052102000051号 · 桂ICP备13007215号-3</p><div class="footer_service"><p class="p_2">本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯</p><p class="p_2">所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！</p></div></div><script src="https://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js"></script><script type="text/javascript" src="https://apps.bdimg.com/libs/jquery-lazyload/1.9.5/jquery.lazyload.min.js"></script><script type="text/javascript">$("img.lazy").lazyload({effect : "fadeIn"});</script><script type="text/javascript" src="/img/jquery.meiwen.min.js"></script></body></html>