1
AlloVince 2012-07-26 00:22:12 +08:00
code {
word-break: break-all; word-wrap: break-word; white-space: pre; white-space: pre-wrap; } 另:pre和code本来就不应该互相嵌套 |
2
udonmai OP @AlloVince 其实我最困惑的就是怎么会撑大外围的容器,我把内部设为行内元素也会自己换行,而且有时候很复杂。。 看 udonmai.com里的代码高亮。。
|
3
houkanshan 2012-07-26 10:09:19 +08:00
code的默认display是inline的把,inline是无法设置宽度的(都是auto),所以width:100%是没有用的。并没有 ‘撑大’ 外围容器啊?
换行主要看下white-space、word-wrap和word-break吧 |
4
udonmai OP @houkanshan 恩,试了white-space,发现让他强制不换行可行,唯一的不足是它会把代码的缩进给取消(因为它的nowrap属性是吧空白取消掉的。。) 设置为pre,这是Octopress的做法,但是我这么设还是会换行,纠结。。
|
5
udonmai OP @AlloVince
@houkanshan 现在试出最佳方案了。。。 我的结构是 <pre> <ol></ol> </pre> pre {white-space: pre;} ol {word-wrap: normal; list-style: decimal; white-space: pre;} 这样之后ol内部不管再嵌套什么都不换行了,而且不用设置width,当超过pre的宽度后自动触发滚动条~ |
6
udonmai OP |
7
AlloVince 2012-07-26 11:14:06 +08:00
<pre>是用来承载纯文本的,里面不允许再嵌套html标签
|
8
udonmai OP @AlloVince 这样子。。 因为之前很多地方的代码高亮都是把代码包在 <pre> 里的(写Markdown的代码段就是个典型),所以我也没有去深究它。。
|
9
chenluois 2012-07-26 11:25:42 +08:00
@AlloVince 不要误导人好不?<pre> 里面嵌 <code> 标签是很标准的用法。
http://www.w3.org/TR/2012/WD-html5-20120329/the-pre-element.html#the-pre-element |
11
AlloVince 2012-07-26 11:48:50 +08:00
@chenluois
@udonmai 我的失误,一直对pre都误解了 1. pre只能内嵌 flow content (http://dev.w3.org/html5/spec-author-view/content-models.html#flow-content) 像<p>,<div>这样的块元素是不允许被内嵌的 2. code只允许内嵌Phrasing content (http://dev.w3.org/html5/spec-author-view/content-models.html#phrasing-content) 3. 所以pre可以内嵌code,但是code不能内嵌 pre |