Html 如何在不换行的情况下制作带有文本溢出省略号的流体宽度标题？

How can I make a fluid width header with text-overflow ellipsis without wrapping?

提问by Ryan

I need a header and button on the same line, using ellipses if necessary.

我需要在同一行上有一个标题和按钮，必要时使用省略号。

Here's a fiddle: http://jsfiddle.net/epyFT/1/

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

I'd like output to look like this:

我希望输出看起来像这样：

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

Or

或者

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

Or with a smaller window:

或者使用较小的窗口：

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

The button should never float to the next line. How can I do this?

按钮不应浮动到下一行。我怎样才能做到这一点？

HTML

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

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

---

---

Bonus

奖金

Extra credit for getting a second (fixed width) button in there to pull right.

在那里获得第二个（固定宽度）按钮以向右拉的额外功劳。

_________________________________________________________
|                                                       |
| Header goes here [button1]                  [button2] |
|                                                       |
|                                                       |
| Super, super, super, super long... [button] [button2] |
|                                                       |
---------------------------------------------------------

回答by Dan

Maybe something like this helps? http://jsfiddle.net/epyFT/3/

也许这样的事情有帮助？http://jsfiddle.net/epyFT/3/

I'm not sure how to make the button align to the no-wrapped width of the container, and am only using percentage widths for the cells.

我不确定如何使按钮与容器的无包装宽度对齐，并且我只使用单元格的百分比宽度。

New code:

新代码：

.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;
}

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

回答by Dan

I think I found you a better solution: http://jsfiddle.net/epyFT/9/

我想我找到了一个更好的解决方案：http: //jsfiddle.net/epyFT/9/

HTML:

HTML：

<div class="container">
    <h2>This is a very long heading that should wrap with ellipsis when too long, but have a button to it's right.</h2>
    <button>Hello.</button>
</div>

<div class="container">
    <h2>This is short.</h2>
    <button>Sup</button>
</div>

CSS:

CSS：

.container {
    display: inline-block;
   max-width:100%;
   position: relative;
}
h2 {  
    padding-right: 200px;
    box-sizing: border-box;
    width: 100%;
    display: inline-block; 
    overflow: hidden; 
    white-space: nowrap; 
    text-overflow: ellipsis; 
    word-break: break-all; 
    word-wrap: break-word; 
}

button {
    position: absolute;
    width: 100px;
    right: 95px;
    top: 2em;
}

回答by Olaf Dietsche

Here's another one

这是另一个

HTML:

HTML：

<div class="container">
     <h2 class="oneline">This is the header that should never wrap and elipse if it doesn't fit</h2>
    <button>Button</button>
</div>
<div class="container">
     <h2 class="oneline">Header</h2>
    <button>Button</button>
</div>

CSS:

CSS：

.container {
    width: 100%;
}
.oneline {
    display: inline-block;
    vertical-align: middle;
    max-width: 80%;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

JSFiddle

JSFiddle

To align the buttons at the right side, add width: 80%;to .oneline.

要对齐右侧的按钮，请添加width: 80%;到.oneline。

回答by hammerbrostime

I took Dan's great answer (which was only compatible with Webkit browsers), and made it compatible with Firefox and Internet Explorer 8+. Here is the fiddle: http://jsfiddle.net/hammerbrostime/9t5bX/1/

我采用了 Dan 的好答案（仅与 Webkit 浏览器兼容），并使其与 Firefox 和 Internet Explorer 8+ 兼容。这是小提琴：http: //jsfiddle.net/hammerbrostime/9t5bX/1/

HTML:

HTML：

<div class="container">
    <h2>This is a very long heading that should wrap with ellipsis when too long, but have a button to it's right.</h2>
    <button>Hello.</button>
</div>

<div class="container">
    <h2>This is short.</h2>
    <button>Sup</button>
</div>

CSS:

CSS：

.container {
    display: inline-block;
    max-width:100%;
    position: relative;
}
h2 {  
    padding-right: 200px;
    box-sizing: border-box;
    width: 100%;
    display: inline-block; 
    overflow: hidden; 
    white-space: nowrap; 
    text-overflow: ellipsis; 
    word-break: break-all; 
    /* word-wrap: break-word;  taken out, caused issues in IE */
    max-width: -moz-calc(100% - 200px); /* FF hack */
}

button {
    position: absolute;
    width: 100px;
    right: 95px;
    top: 2em;
}