html - 你能制作一个不包含固定宽度右侧边栏的流体宽度标题吗？

Question

恐怕比这要复杂一些。

我需要一个永不换行的可变宽度标题 (h2)，带有一个左对齐按钮 (.btn1)，并且所有这些都不会与固定宽度的右侧按钮重叠(.btn2).

如果这听起来太复杂，写得好怎么样Fiddle ( http://jsfiddle.net/8ZtU5/ ) 和一些漂亮的 ASCII 艺术？

__________________________________________________
|                                                |
| This header is really really... [One]    [Two] |
|                                                |
--------------------------------------------------
__________________________________________________
|                                                |
| This header is short [One]               [Two] |
|                                                |
--------------------------------------------------
_________________________________
|                               |
| This header is... [One] [Two] |
|                               |
---------------------------------

你怎么看？你能帮忙吗？

---

HTML: ( http://jsfiddle.net/8ZtU5/ )

注意:额外的包装只是为了方便。除了呈现的结果之外，没有什么是必需的。

<div class="container">
    <div class="fluid-width">
        <div class="no-wrapping">
            <h2>This header is really really really really really really really long</h2>
        </div>
        <button class="btn1">One</button>
    </div>
    <div class="fixed-width">
        <button class="btn2">Two</button>
    </div>
</div>
<div class="container">
    <div class="fluid-width">
        <div class="no-wrapping">
            <h2>This header is short</h2>
        </div>
        <button class="btn1">One</button>
    </div>
    <div class="fixed-width">
        <button class="btn2">Two</button>
    </div>
</div>

基本 CSS:

.container {
    margin:20px 0;
    width:100%;
    min-width:300px;
    background:#eee;
}

.fluid-width {
    min-width:200px;
    display:inline-block;
}

.fixed-width {
    width:100px;
    max-width:100px;
    min-width:100px;
    display:inline-block;
}

.no-wrapping {
    overflow: hidden; white-space: nowrap; text-overflow: ellipsis; word-break: break-all; word-wrap: break-word;
}
h2 {
    display:inline;
}

无需猜测...如果您想演奏，一切都在 fiddle 上:http://jsfiddle.net/8ZtU5/

Answer 1

让这个工作正常，也许这就是你的意思。 jsfiddle稍微编辑了 html 结构