V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
V2EX 提问指南
udonmai
V2EX  ›  问与答

突然对CSS中的 overflow 很困惑

  •  
  •   udonmai · 2012-07-26 00:15:57 +08:00 · 3521 次点击
    这是一个创建于 4488 天前的主题,其中的信息可能已经有所发展或是发生改变。
    就拿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;没效果(是因为用开发人员工具实时调的它没反应?)
    13 条回复    1970-01-01 08:00:00 +08:00
    AlloVince
        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本来就不应该互相嵌套
    udonmai
        2
    udonmai  
    OP
       2012-07-26 08:41:30 +08:00
    @AlloVince 其实我最困惑的就是怎么会撑大外围的容器,我把内部设为行内元素也会自己换行,而且有时候很复杂。。 看 udonmai.com里的代码高亮。。
    houkanshan
        3
    houkanshan  
       2012-07-26 10:09:19 +08:00
    code的默认display是inline的把,inline是无法设置宽度的(都是auto),所以width:100%是没有用的。并没有 ‘撑大’ 外围容器啊?

    换行主要看下white-space、word-wrap和word-break吧
    udonmai
        4
    udonmai  
    OP
       2012-07-26 10:28:39 +08:00
    @houkanshan 恩,试了white-space,发现让他强制不换行可行,唯一的不足是它会把代码的缩进给取消(因为它的nowrap属性是吧空白取消掉的。。) 设置为pre,这是Octopress的做法,但是我这么设还是会换行,纠结。。
    udonmai
        5
    udonmai  
    OP
       2012-07-26 10:39:49 +08:00   ❤️ 1
    @AlloVince
    @houkanshan 现在试出最佳方案了。。。

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

    这样之后ol内部不管再嵌套什么都不换行了,而且不用设置width,当超过pre的宽度后自动触发滚动条~
    udonmai
        6
    udonmai  
    OP
       2012-07-26 10:41:34 +08:00
    @houkanshan
    @AlloVince 貌似外面的 <pre> 不管设不设 whitespace 都不影响。。
    AlloVince
        7
    AlloVince  
       2012-07-26 11:14:06 +08:00
    <pre>是用来承载纯文本的,里面不允许再嵌套html标签
    udonmai
        8
    udonmai  
    OP
       2012-07-26 11:16:56 +08:00
    @AlloVince 这样子。。 因为之前很多地方的代码高亮都是把代码包在 <pre> 里的(写Markdown的代码段就是个典型),所以我也没有去深究它。。
    chenluois
        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
    udonmai
        10
    udonmai  
    OP
       2012-07-26 11:29:39 +08:00
    @chenluois 感谢指出~
    AlloVince
        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
    udonmai
        12
    udonmai  
    OP
       2012-07-26 12:05:14 +08:00
    @AlloVince 赞~
    chenluois
        13
    chenluois  
       2012-07-26 12:24:38 +08:00
    @AlloVince 改正了就好。不过我觉得你还是再仔细看下都有哪些标签属于 flow content,哪些属于 Phrasing content 吧。
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   5476 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 23ms · UTC 01:34 · PVG 09:34 · LAX 17:34 · JFK 20:34
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.