html – 如何使文本溢出省略号的流体宽度标题无包装？

概述我需要一个标题和按钮在同一行,如果需要使用省略号. 这是一个小提琴：http://jsfiddle.net/epyFT/1/ 我希望输出如下所示： _________________________________________________________| || Header g 我需要一个标题和按钮在同一行,如果需要使用省略号.

这是一个小提琴：http://jsfiddle.net/epyFT/1/

我希望输出如下所示：

_________________________________________________________|                                                       || header goes here [button]                             ||                                                       |---------------------------------------------------------

要么

_________________________________________________________|                                                       || Super,super,super long header... [button]    ||                                                       |---------------------------------------------------------

或者一个较小的窗口：

____________________________|                          || header goes... [button]  ||                          |----------------------------

该按钮不应该浮动到下一行.我该怎么做？

HTML

<div >    <h2>This is the header that should never wrap and elipse if it doesn't fit</h2>    <button>button</button></div><div >    <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 >    <div >        <div >            <h2>This is the header that should never wrap and elipse if it doesn't fit</h2>        </div>    </div>    <div >        <button>button</button>    </div></div><div >    <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;}

总结

以上是内存溢出为你收集整理的html – 如何使文本溢出省略号的流体宽度标题无包装？全部内容，希望文章能够帮你解决html – 如何使文本溢出省略号的流体宽度标题无包装？所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。