CSS实现pre标签中内容换行方法_html/css_WEB-ITnose
程序员文章站
2022-05-10 14:22:20
...
CSS实现pre标签中内容换行方法技术
maybe yes 发表于2015-01-25 18:35
HTML 中的 PRE 标签默认是不会换行的,即使声明了 word-wrap 和 word-break 属性也没有效果;DIV 标签可以很方便的换行,不会把页面撑破。因为这个原因,很多网站在显示代码的时候使用 DIV 来作为容器。使用 DIV 标签装载代码有个弊端,就是冗余内容太多,换行,制表符,空格等都需要转换,自然源代码的体积也大了不少。若一定要使用 DIV 标签,也可以通过 white-space 来控制 DIV 中内容显示的样式,此举也是可以的。
本人认为,在源代码中使用 PRE 标签作为代码容器是首选,后期前端再用其他的 JavaScript 代码高亮插件美化渲染,那又另当别论。使用 CSS 将 PRE 中内容换行的样式如下,测试发现效果还不错。
阅(72)评(0)查看评论
推荐阅读
-
解决html表格中内容超出不强制换行和超出宽度自动隐藏并显示省略号_html/css_WEB-ITnose
-
在HTML中如何实现链接选择?详见内容_html/css_WEB-ITnose
-
C#(HTML)_小技巧_关于textbox框中不能输入HTML标签的解决方法(如输入“
”后,在提交表单时系统会崩溃)_html/css_WEB-ITnose
-
C#(HTML)_小技巧_关于textbox框中不能输入HTML标签的解决方法(如输入“
”后,在提交表单时系统会崩溃)_html/css_WEB-ITnose
-
CSS在页面布局中实现div垂直居中的方法总结_html/css_WEB-ITnose
-
CSS实现pre标签中内容换行方法_html/css_WEB-ITnose
-
CSS让网页中的内容自动换行的实现方法
-
如何通过导航栏按钮实现对 iframe标签所嵌入网页内容的加载控制_html/css_WEB-ITnose
-
CSS中隐藏滚动条的简单实现方法_html/css_WEB-ITnose
-
CSS让网页中的内容自动换行的实现方法