你能不能做一个流体宽度的标题，而不是用固定宽度的右侧边栏?

I'm afraid it's a bit more complicated than that.

恐怕要比这复杂一点。

I need a fluid width header (h2) that never wraps, with a left aligned button (.btn1), and all without overlapping a fixed-width right button (.btn2).

我需要一个不带左对齐按钮(.btn1)的流宽头(h2)，并且不需要重叠固定宽度的右按钮(.btn2)。

If that sounds too complicated, how about a well written Fiddle (http://jsfiddle.net/8ZtU5/) and some beautiful ASCII art?

如果这听起来太复杂的话，那来个写得很好的小提琴(http://jsfiddle.net/8ZtU5/)和一些漂亮的ASCII艺术怎么样?

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

What do you think? Can you help?

你怎么认为?你能帮助吗?

---

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

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

Note: extra wrappers are just for convenience. Nothing is necessary except the rendered result.

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

<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>

Base CSS:

基础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;
}

No need to guess... it's all on the fiddle if you want to play: http://jsfiddle.net/8ZtU5/

不需要猜……如果你想玩的话，这一切都很麻烦:http://jsfiddle.net/8ZtU5/。

2 个解决方案

#1

got this one working, maybe this is what you meant. jsfiddle Edited the html structure a bit

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

#2

This is roughly a solution, you can vary the amount of text displayed in the heading by altering the max-width of the h2.

这是一个大致的解决方案，您可以通过改变h2的最大宽度来改变标题中显示的文本数量。

http://jsfiddle.net/QJg8X/

http://jsfiddle.net/QJg8X/

markup

标记

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

css

css

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

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

.fixed-width {
    display: inline-block;
    overflow: hidden;
    width: 400px;
}

h2 {
    float: left;
    margin: 0;
    padding: 0;
    display: block;
    white-space: nowrap;
    max-width: 80%;
    overflow: hidden;
    text-overflow: ellipsis;
}

button.btn1 { float: left; }
button.btn2 { float: right; }

I've only tested the above with modern browsers however.

不过，我只是用现代浏览器测试了上面的内容。

Ah.. Rather similar to AzDesign's answer really (+1), save for the fact it's using floats rather than absoute positioning.

啊. .与AzDesign的答案非常相似(+1)，除了它使用的是浮点数，而不是absoute的定位。

update

Another way to approach the same problem is to have a fixed-width region for your buttons, this means a slight alteration in markup but means you don't have to specify a max width:

另一种处理相同问题的方法是为按钮设置一个固定宽度的区域，这意味着标记略有变化，但这意味着您不必指定最大宽度:

http://jsfiddle.net/QJg8X/2/

http://jsfiddle.net/QJg8X/2/

markup

标记

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

css

css

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

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

.fixed-width {
    display: block;
    overflow: hidden;
    width: 400px;
}

h2 {
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.buttons {
    display: block;
    width: 150px;
    float: right;
}

button.btn2 { float: right; }