在 overflow:hidden 文本后按下的图标

Question

我读了这个问题：Why is this inline-block element pushed downward? 我想我理解这个问题，但是使用 display 的任何配置都不起作用，并且 vertical-align: top 似乎没有解决基线问题，因为元素高度仍然混乱。

我做了一个 plunker here，来举例说明我的问题。

有没有办法固定高度并保持文本上的 overflow:hidden 属性？

button.overflow p {
  max-width: 100px;
  white-space: nowrap;
  overflow: hidden;
  display: inline-block;
  text-overflow: ellipsis;
}
button.normal p {
  display: inline;
}
button.align i {
  vertical-align: top;
  display: inline-block;
}
button {
  background: black;
  color: white;
  margin: 1em;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.2/css/font-awesome.min.css" rel="stylesheet" />

<button class="overflow">
  <p>very long button text</p><i class="fa fa-caret-down"></i>
</button>
<button class="overflow">
  <p>short</p><i class="fa fa-caret-down"></i>
</button>
<button class="normal">
  <p>normal</p><i class="fa fa-caret-down"></i>
</button>
<button class="overflow align">
  <p>with vertical align</p><i class="fa fa-caret-down"></i>
</button>

Answer 1

* {
  box-sizing: border-box;
}
button {
  max-width: 100px;
}
button p {
  width: 80%;                /* dedicated space for text */
  white-space: nowrap;
  overflow: hidden;
  display: inline-block;
  text-overflow: ellipsis;
  vertical-align: middle;    /* controls vertical-align of icon */
  margin: 0;                 /* remove default margin */
}
button i {
  width: 20%;                /* dedicated space for icon */
  display: inline-block;
}
button {
  background: black;
  color: white;
  margin: 1em;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.2/css/font-awesome.min.css" rel="stylesheet" />

<button class="overflow">
  <p>very long button text</p><i class="fa fa-caret-down"></i>
</button>

<button class="overflow">
  <p>short</p><i class="fa fa-caret-down"></i>
</button>

<button class="normal">
  <p>normal</p><i class="fa fa-caret-down"></i>
</button>

<button class="overflow align">
  <p>with vertical align</p><i class="fa fa-caret-down"></i>
</button>

在 overflow:hidden 文本后按下的图标

Icon pushed down following overflow:hidden text

html

css

overflow

font-awesome

jsFiddle