溢出后按下图标：隐藏文字

Question

我读到了这个问题：Why is this inline-block element pushed downward? 我认为我理解了这个问题，但使用display的任何配置都无法正常工作，vertical-align: top似乎无法解决基线问题，因为元素高度仍然混乱。

我做了一个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>

jsFiddle