突然对CSS中的 overflow 很困惑

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

这是一个创建于 4511 天前的主题，其中的信息可能已经有所发展或是发生改变。

就拿Octopress举例吧 http://octopress.org/docs/plugins/blockquote/

这个页面的code部分的HTML大概都是这个样子的：

<pre><code>{% blockquote Seth Godin http://sethgodin.typepad.com/seths_blog/2009/07/welcome-to-island-marketing.html Welcome to Island Marketing %}
Every interaction is both precious and an opportunity to delight.
{% endblockquote %}
</code></pre>

其实 code 内是三个句子，没有换行的。而显示的时候由于在 pre 上设置了 overflow: auto;而内部的 code 的宽度比 pre 宽，所以 pre 会被 code 撑出横向的滚动条来。

现在的问题是， pre 并没有设置 width ，code 也是，而 code 的宽度是被三个句子中最长的那个给撑开的。

那么什么类型的东西才可以对什么类型的东西进行宽度上的撑大呢？
为什么句子没有换行？我给设置 word-break:break-all;也无济于事。
我给 code 设置 width: 100%; 或者 100px;没效果(是因为用开发人员工具实时调的它没反应？)

Code

句子

13 条回复 • 1970-01-01 08:00:00 +08:00

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本来就不应该互相嵌套

udonmai

2012-07-26 08:41:30 +08:00

@AlloVince 其实我最困惑的就是怎么会撑大外围的容器，我把内部设为行内元素也会自己换行，而且有时候很复杂。。看 udonmai.com里的代码高亮。。

houkanshan

2012-07-26 10:09:19 +08:00

code的默认display是inline的把，inline是无法设置宽度的(都是auto)，所以width:100%是没有用的。并没有 ‘撑大’ 外围容器啊？

换行主要看下white-space、word-wrap和word-break吧

udonmai

2012-07-26 10:28:39 +08:00

@houkanshan 恩，试了white-space,发现让他强制不换行可行，唯一的不足是它会把代码的缩进给取消（因为它的nowrap属性是吧空白取消掉的。。）设置为pre，这是Octopress的做法，但是我这么设还是会换行，纠结。。

udonmai

2012-07-26 10:39:49 +08:00

@AlloVince
@houkanshan 现在试出最佳方案了。。。

我的结构是 <pre> <ol></ol> </pre>
pre {white-space: pre;}
ol {word-wrap: normal; list-style: decimal; white-space: pre;}

这样之后ol内部不管再嵌套什么都不换行了，而且不用设置width，当超过pre的宽度后自动触发滚动条~

udonmai

2012-07-26 10:41:34 +08:00

@houkanshan
@AlloVince 貌似外面的 <pre> 不管设不设 whitespace 都不影响。。

AlloVince

2012-07-26 11:14:06 +08:00

<pre>是用来承载纯文本的，里面不允许再嵌套html标签

udonmai

2012-07-26 11:16:56 +08:00

@AlloVince 这样子。。因为之前很多地方的代码高亮都是把代码包在 <pre> 里的（写Markdown的代码段就是个典型），所以我也没有去深究它。。

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

udonmai

2012-07-26 11:29:39 +08:00

@chenluois 感谢指出~

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

udonmai

2012-07-26 12:05:14 +08:00

@AlloVince 赞~

chenluois

2012-07-26 12:24:38 +08:00

@AlloVince 改正了就好。不过我觉得你还是再仔细看下都有哪些标签属于 flow content，哪些属于 Phrasing content 吧。