我需要一个标题和按钮在同一行,如果需要使用省略号.
这是一个小提琴：http://jsfiddle.net/epyFT/1/
我希望输出如下所示：
_________________________________________________________ | | | Header goes here [button] | | | ---------------------------------------------------------
要么
_________________________________________________________ | | | Super,super,super long header... [button] | | | ---------------------------------------------------------
或者一个较小的窗口：
____________________________ | | | Header goes... [button] | | | ----------------------------
该按钮不应该浮动到下一行.我该怎么做？
HTML
<div class="container">
<h2>This is the header that should never wrap and elipse if it doesn't fit</h2>
<button>Button</button>
</div>
<div class="container">
<h2>Header</h2>
<button>Button</button>
</div>
CSS
.container {
width:100%;
}
h2 {
display:inline;
min-width:200px;
overflow: hidden; white-space: nowrap; text-overflow: ellipsis; word-break: break-all; word-wrap: break-word;
}
button {
width:100px;
}
奖金
获得第二个(固定宽度)按钮的额外功劳在那里向右拉.
_________________________________________________________ | | | Header goes here [button1] [button2] | | | | | | Super,super long... [button] [button2] | | | ---------------------------------------------------------
解决方法
也许这样的东西有帮助吗？
http://jsfiddle.net/epyFT/3/
我不知道如何使按钮与容器的无卷宽度对齐,只使用单元格的百分比宽度.
新代码：
<div class="container">
<div class="cell1">
<div class="wrap">
<h2>This is the header that should never wrap and elipse if it doesn't fit</h2>
</div>
</div>
<div class="cell2">
<button>Button</button>
</div>
</div>
<div class="container">
<h2>Header</h2>
<button>Button</button>
</div>
CSS：
.container {
width:100%;
display: table;
table-layout: fixed;
}
.container > div {
display: table-cell;
}
.cell1 { }
.wrap { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; word-break: break-all; word-wrap: break-word; }
.cell2 { width: 60%; }
h2 {
display:inline;
min-width:200px;
}
button {
width:100px;
}
