如何在不换行的情况下使用文本溢出省略号制作流体宽度标题？答案

【问题标题】：How can I make a fluid width header with text-overflow ellipsis without wrapping?如何在不换行的情况下使用文本溢出省略号制作流体宽度标题？
【发布时间】：2013-04-20 21:39:44
【问题描述】：

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

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

我希望输出如下所示：

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

或者

_________________________________________________________
|                                                       |
| Super, 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, super, super long... [button] [button2] |
|                                                       |
---------------------------------------------------------

【问题讨论】：

您对目标浏览器有什么要求吗？
不幸的是，text-overflow:ellipsis; 仅适用于块容器。 dev.w3.org/csswg/css-ui/#text-overflow
@Dan，常见的现代版本——Chrome、Safari、IE 8、Firefox 等
@SonuJoshi，我可以模拟块容器吗？我为 h2 尝试了 inline-block 和 table-cell。你有什么建议？
Dan 已经解决了。我正在做类似的事情。

标签： html css

【解决方案1】：

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

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

新代码：

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

【讨论】：

太棒了！我不需要额外的 cell1 包装，但它完美无瑕！我什至可以在右侧挤入一个额外的静态宽度 div。更新小提琴：jsfiddle.net/epyFT/7 再次感谢！
另外，如果 H2 被换行，它可能具有相对定位的右边距或填充，并且按钮可以绝对定位到该填充区域中。
但是要小心使用表格单元格的相对/绝对定位。它在浏览器中变得很奇怪。
一点帮助。事实证明，当标题较小时，按钮不会向左浮动。请参阅更新的小提琴：jsfiddle.net/epyFT/8 知道如何使按钮更靠近标题（有空间时向左拉）。
在下面查看我的新答案。考虑更改接受的答案？ =)

【解决方案2】：

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

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：

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

【讨论】：

【解决方案3】：

还有一个

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：

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

JSFiddle

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

【讨论】：

我无法让这个工作。容器并没有真正填满 100% 的宽度。这是一个小提琴：jsfiddle.net/zRkmu
@Ryan 当我将border: 1px solid red; 添加到.container 时，它会延伸到右边缘。你想达到什么目标？按钮是否应该正确冲洗？顺便说一句，我正在使用 FF 20。
我明白你所说的 100% 宽度是什么意思。但这仅在您有固定宽度的标题时才有效。我希望标题是流畅的（即尽可能适合）。更新小提琴：jsfiddle.net/zRkmu/3
@Ryan 您可以将max-width 移动到wrapper，这允许使用百分比宽度。也许这更像是您的想法。

【解决方案4】：

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

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

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

【讨论】：